【问题标题】:How do I make a checkbox required on an ASP.NET form?如何在 ASP.NET 表单上制作所需的复选框?
【发布时间】:2010-11-16 17:16:19
【问题描述】:

我对此进行了一些搜索,并找到了几个部分答案,但是没有什么能让我感到“这是正确的方法”。要回答对此问题最常见的投诉:“复选框可以有两种合法状态 - 选中和未选中”,这是一个“我接受条款和条件......”复选框,必须选中才能完成注册,因此,从业务逻辑的角度来看,需要选中该框。

请在您的回复中提供完整的可剪切粘贴的代码片段!我知道这有几个部分——CustomValidator(大概)、代码隐藏、一些 javascript 以及可能对 IsValid 的检查,对我来说令人沮丧的部分是,在我看到的每个示例中,其中一个关键碎片不见了!

【问题讨论】:

    标签: asp.net checkbox validation


    【解决方案1】:

    用于客户端验证的javascript函数(使用jQuery)...

    function CheckBoxRequired_ClientValidate(sender, e)
    {
        e.IsValid = jQuery(".AcceptedAgreement input:checkbox").is(':checked');
    }
    

    用于服务器端验证的代码隐藏...

    protected void CheckBoxRequired_ServerValidate(object sender, ServerValidateEventArgs e)
    {
        e.IsValid = MyCheckBox.Checked;
    }
    

    复选框和验证器的 ASP.Net 代码...

    <asp:CheckBox runat="server" ID="MyCheckBox" CssClass="AcceptedAgreement" />
    <asp:CustomValidator runat="server" ID="CheckBoxRequired" EnableClientScript="true"
        OnServerValidate="CheckBoxRequired_ServerValidate"
        ClientValidationFunction="CheckBoxRequired_ClientValidate">You must select this box to proceed.</asp:CustomValidator>
    

    最后,在您的回发中 - 无论是通过按钮还是其他...

    if (Page.IsValid)
    {
        // your code here...
    }
    

    【讨论】:

    • 我可能做错了什么。最后我将继续调查,但是 ControlToValidate="" 抛出异常“ControlToValidate 属性引用的控件 无法验证。”这会破坏 javascript 等。
    • 啊,对。只需删除它 - CheckBox 没有实现正确的接口来绑定它。如果没有设置该属性,验证器仍然可以正常运行。我将相应地更新我的示例。
    • javascript 函数名称的 CustomValidator 参数应该是“ClientValidationFunction”,而不是“OnClientValidate”。见:msdn.microsoft.com/en-us/library/9eee01cx(v=VS.100).aspx
    • 我建议使用jQuery("#&lt;%= MyCheckBox.ClientID %&gt;") 而不是jQuery(".AcceptedAgreement input:checkbox") 来更明确地影响您尝试影响的元素。
    • 我最初没有注意到没有 ControlToValidate 属性。包含此属性会导致异常,因此向可能也错过该属性的其他人发出警告。
    【解决方案2】:

    安德鲁的答案的C#版本:

    <asp:CustomValidator ID="CustomValidator1" runat="server" 
            ErrorMessage="Please accept the terms..." 
            onservervalidate="CustomValidator1_ServerValidate"></asp:CustomValidator>
        <asp:CheckBox ID="CheckBox1" runat="server" />
    

    代码隐藏:

    protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
    {
        args.IsValid = CheckBox1.Checked;
    }
    

    【讨论】:

      【解决方案3】:

      如果你想要一个真正的验证器,它不依赖于 jquery 并且也处理服务器端验证(你应该。服务器端验证是最重要的部分)那么这里是一个控件

      public class RequiredCheckBoxValidator : System.Web.UI.WebControls.BaseValidator
      {
          private System.Web.UI.WebControls.CheckBox _ctrlToValidate = null;
          protected System.Web.UI.WebControls.CheckBox CheckBoxToValidate
          {
              get
              {
                  if (_ctrlToValidate == null)
                      _ctrlToValidate = FindControl(this.ControlToValidate) as System.Web.UI.WebControls.CheckBox;
      
                  return _ctrlToValidate;
              }
          }
      
          protected override bool ControlPropertiesValid()
          {
              if (this.ControlToValidate.Length == 0)
                  throw new System.Web.HttpException(string.Format("The ControlToValidate property of '{0}' is required.", this.ID));
      
              if (this.CheckBoxToValidate == null)
                  throw new System.Web.HttpException(string.Format("This control can only validate CheckBox."));
      
              return true;
          }
      
          protected override bool EvaluateIsValid()
          {
              return CheckBoxToValidate.Checked;
          }
      
          protected override void OnPreRender(EventArgs e)
          {
              base.OnPreRender(e);
      
              if (this.Visible && this.Enabled)
              {
                  System.Web.UI.ClientScriptManager cs = this.Page.ClientScript;
                  if (this.DetermineRenderUplevel() && this.EnableClientScript)
                  {
                      cs.RegisterExpandoAttribute(this.ClientID, "evaluationfunction", "cb_verify", false);
                  }
                  if (!this.Page.ClientScript.IsClientScriptBlockRegistered(this.GetType().FullName))
                  {
                      cs.RegisterClientScriptBlock(this.GetType(), this.GetType().FullName, GetClientSideScript());
                  } 
              }
          }
      
          private string GetClientSideScript()
          {
              return @"<script language=""javascript"">function cb_verify(sender) {var cntrl = document.getElementById(sender.controltovalidate);return cntrl.checked;}</script>";
          }
      }
      

      【讨论】:

      • 这是唯一适用于表单中多个 CheckBox 的答案,而不是每个对象需要 1 个函数。嘘!
      • 非常感谢。我需要一种方法来使用多个动态呈现的控件来做到这一点。太棒了。
      • 虽然从 Scott 选择的解决方案是正确/有效的,但我相信这是更完整的解决方案。这个自定义控件应该已经嵌入到框架中。谢谢 CirrusABS!
      【解决方案4】:

      Scott 的答案适用于复选框类。如果你想要单独的复选框,你必须有点偷偷摸摸。如果你只做一个盒子,最好用ID来做。这个例子通过特定的复选框来完成,不需要 jQuery。这也是一个很好的小例子,说明如何将那些讨厌的控件 ID 放入 Javascript。

      .ascx:

      <script type="text/javascript">
      
          function checkAgreement(source, args)
          {                
              var elem = document.getElementById('<%= chkAgree.ClientID %>');
              if (elem.checked)
              {
                  args.IsValid = true;
              }
              else
              {        
                  args.IsValid = false;
              }
          }
      
          function checkAge(source, args)
          {
              var elem = document.getElementById('<%= chkAge.ClientID %>');
              if (elem.checked)
              {
                  args.IsValid = true;
              }
              else
              {
                  args.IsValid = false;
              }    
          }
      
      </script>
      
      <asp:CheckBox ID="chkAgree" runat="server" />
      <asp:Label AssociatedControlID="chkAgree" runat="server">I agree to the</asp:Label>
      <asp:HyperLink ID="lnkTerms" runat="server">Terms & Conditions</asp:HyperLink>
      <asp:Label AssociatedControlID="chkAgree" runat="server">.</asp:Label>
      <br />
      
      <asp:CustomValidator ID="chkAgreeValidator" runat="server" Display="Dynamic"
          ClientValidationFunction="checkAgreement">
          You must agree to the terms and conditions.
          </asp:CustomValidator>
      
      <asp:CheckBox ID="chkAge" runat="server" />
      <asp:Label AssociatedControlID="chkAge" runat="server">I certify that I am at least 18 years of age.</asp:Label>        
      <asp:CustomValidator ID="chkAgeValidator" runat="server" Display="Dynamic"
          ClientValidationFunction="checkAge">
          You must be 18 years or older to continue.
          </asp:CustomValidator>
      

      还有代码隐藏:

      Protected Sub chkAgreeValidator_ServerValidate(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ServerValidateEventArgs) _
      Handles chkAgreeValidator.ServerValidate
          e.IsValid = chkAgree.Checked
      End Sub
      
      Protected Sub chkAgeValidator_ServerValidate(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ServerValidateEventArgs) _
      Handles chkAgeValidator.ServerValidate
          e.IsValid = chkAge.Checked
      End Sub
      

      【讨论】:

        【解决方案5】:

        我通常在客户端执行验证:

        <asp:checkbox id="chkTerms" text=" I agree to the terms" ValidationGroup="vg" runat="Server"  />
        <asp:CustomValidator id="vTerms"
                        ClientValidationFunction="validateTerms" 
                        ErrorMessage="<br/>Terms and Conditions are required." 
                        ForeColor="Red"
                        Display="Static"
                        EnableClientScript="true"
                        ValidationGroup="vg"
                        runat="server"/>
        
        <asp:Button ID="btnSubmit" OnClick="btnSubmit_Click" CausesValidation="true" Text="Submit" ValidationGroup="vg" runat="server" />
        
        <script>
            function validateTerms(source, arguments) {
                var $c = $('#<%= chkTerms.ClientID %>');
                if($c.prop("checked")){
                    arguments.IsValid = true;
                } else {
                    arguments.IsValid = false;
                }
            }
        </script>       
        

        【讨论】:

        • 最好的解决方案之一,因为它不回发。
        • 这样的问题是,如果你提交,验证器消息不会消失,然后尝试勾选框。
        【解决方案6】:

        非javascript方式。 . aspx 页面:

         <form id="form1" runat="server">
        <div>
            <asp:CheckBox ID="CheckBox1" runat="server" />
            <asp:CustomValidator ID="CustomValidator1"
                runat="server" ErrorMessage="CustomValidator" ControlToValidate="CheckBox1"></asp:CustomValidator>
        </div>
        </form>
        

        代码背后:

        Protected Sub CustomValidator1_ServerValidate(ByVal source As Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs) Handles CustomValidator1.ServerValidate
            If Not CheckBox1.Checked Then
                args.IsValid = False
            End If
        End Sub
        

        对于您可能需要的任何操作(业务规则):

        If Page.IsValid Then
           'do logic
        End If 
        

        对不起 VB 代码。 . .如果您愿意,可以将其转换为 C#。我现在工作的公司需要 VB :(

        【讨论】:

        • 这不起作用,因为您不能将验证器附加到复选框!呜!
        猜你喜欢
        • 1970-01-01
        • 2015-09-13
        • 1970-01-01
        • 1970-01-01
        • 2018-06-28
        • 2016-03-16
        • 2011-08-20
        • 2010-12-19
        • 2013-10-22
        相关资源
        最近更新 更多