Jquery.Validate验证CheckBoxList,RadioButtonList,DropDownList是否选中

最新推荐文章于 2024-06-12 19:50:00 发布

downmoon

最新推荐文章于 2024-06-12 19:50:00 发布

阅读量5.4k

点赞数

分类专栏： Ajax/Jquery Js/VBScript 文章标签： asp textbox server function input 手机

本文链接：https://blog.csdn.net/downmoon/article/details/6764887

版权

Js/VBScript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

Ajax/Jquery

5 篇文章 0 订阅

订阅专栏

Jquery.Validate是一个相当棒的客户端验证控件，它的功能强大就不必说了，本文主要介绍了它对asp.net中三类控件CheckBoxList,RadioButtonList,DropDownList是否选中的验证，当然，服务器的验证也是必须的。

建立一个项目，结构如图：

邀月工作室

主要js如下：

<script type="text/javascript">
  
    //DropDownList验证方法
     $.validator.addMethod('selectNone',
          function(value, element) {
              return this.optional(element) ||(value!= -1);
          }, "请选择至少一项！");

    //ChekcBoxList验证方法

      /* 
     $.validator.addMethod('atLeastOneChecked', function(value, element) {
            var checkedCount = 0;
              $("input[name^='" + <%=txtHistory.UniqueID %> + "']").each(function() { 
               if ($(this).attr('checked')) { checkedCount++; } 
               });
              return checkedCount>0;
            
        },"请选择至少一项");
        */
        
        // 手机号码验证       
     $.validator.addMethod("isMobile", function(value, element) {       
         var length = value.length;   
         var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;   
         return this.optional(element) || (length == 11 && mobile.test(value));       
     }, "请正确填写您的手机号码");       
    
         $(document).ready(function () {
       
        //验证CheckBoxList
         ValidateOptions = function(sender, args) {
         args.IsValid=false;
         var len = $("#history_DIV input:checked").length;    
         args.IsValid = (len>0);
        };


        $("#form1").validate(
        {
        rules: {
            <%=txtVName.UniqueID %>: {
                required: true
            },
                <%=txtEmail.UniqueID %>: {                       
                required: true,
                email:true
            },
                <%=txtRemark.UniqueID %>: {
                    required: true
                },
                <%=txtVSex.UniqueID %>: {
                required: function(element) { 
                    return $("input:radio[name='txtVSex']:checked").val()!="";  
                    } 
                                        },
                <%=txtFrom.UniqueID %>:{
                selectNone: true
                },
                       
                <%=txtMobile.UniqueID %>:{
                required:true,
                isMobile:true
                },
                <%=txtHistory.UniqueID %>:{
                //required: function(element) { 
                //return ($("#history_DIV input:checked").length)>0;}
                //return $("#<%=txtHistory.UniqueID %> input[@type=checkbox]:checked").size()>0; 
                // return $("input[name^='<%=txtHistory.UniqueID %>']").length>0
                //atLeastOneChecked: true
                         
                }

            },
            messages: {
                    <%=txtRemark.UniqueID %>: 
                    {
                    required: "请填写报名理由"
                    },
                    <%=txtVSex.UniqueID %>: 
                    {
                    required: "请选择性别"
                    },
                           
                    <%=txtMobile.UniqueID %>:{
                    required: "请填写手机号码"
                    },
                    <%=txtHistory.UniqueID %>:{
                    required: "请选择届数"
                    }
            }           
        });
      });
    </script>

前台页面如下：

<table width="750" border="0" cellpadding="0" cellspacing="5">
        <tr>
            <td width="150" height="40">
                真实姓名：
            </td>
            <td width="600">
                <asp:TextBox ID="txtVName" runat="Server" Width="280px" />
            </td>
        </tr>
        <tr>
            <td height="40">
                性别：
            </td>
            <td>
                <asp:RadioButtonList ID="txtVSex" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Text="男" Value="男"></asp:ListItem>
                    <asp:ListItem Text="女" Value="女"></asp:ListItem>
                </asp:RadioButtonList>
                <br />
            </td>
        </tr>
        <tr>
            <td height="40">
                手机号码：<br />
            </td>
            <td>
                <asp:TextBox ID="txtMobile" runat="Server" Width="280px" />
                <span>请填写真实手机号码方便接收活动通知</span>
            </td>
        </tr>
        <tr>
            <td height="40">
                E-Mail：<br />
            </td>
            <td>
                <asp:TextBox ID="txtEmail" runat="Server" Width="280px" CssClass="email" />
                <span>用于接收邮件通知</span>
            </td>
        </tr>
        <tr>
            <td height="40">
                职业：<br />
            </td>
            <td>
                <asp:RadioButtonList ID="txtC_Name" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Text="学生" Value="1"></asp:ListItem>
                    <asp:ListItem Text="职员" Value="2"></asp:ListItem>
                    <asp:ListItem Text="经理" Value="3"></asp:ListItem>
                    <asp:ListItem Text="家庭主妇" Value="4"></asp:ListItem>
                    <asp:ListItem Text="自由职业者" Value="5"></asp:ListItem>
                </asp:RadioButtonList>
            </td>
        </tr>
        <tr>
            <td height="40">
                报名人数：<br />
            </td>
            <td>
                <asp:RadioButtonList ID="txtC_EName" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Text="就我一人" Value="1"></asp:ListItem>
                    <asp:ListItem Text="两人" Value="2"></asp:ListItem>
                    <asp:ListItem Text="三人" Value="3"></asp:ListItem>
                </asp:RadioButtonList>
            </td>
        </tr>
        <tr>
            <td height="40">
                报名理由:
            </td>
            <td>
                <asp:TextBox TextMode="MultiLine" Columns="50" Rows="5" ID="txtRemark" runat="Server" />
                <br />
                <span>优质理由怎么写？1.描述您为什么要申请2.描述活动那里吸引您 3.个性化自由发挥</span>
            </td>
        </tr>
        <tr>
            <td height="40">
                参加过的：<br />
            </td>
            <td>
                <table>
                    <tr>
                        <td>
                            <div id="history_DIV">
                                <asp:CheckBoxList ID="txtHistory" runat="server" RepeatDirection="Horizontal">
                                    <asp:ListItem Text="无" Value="0">
                                    </asp:ListItem>
                                    <asp:ListItem Text="第一届" Value="1">
                                    </asp:ListItem>
                                    <asp:ListItem Text="第二届" Value="2">
                                    </asp:ListItem>
                                    <asp:ListItem Text="第三届" Value="3">
                                    </asp:ListItem>
                                </asp:CheckBoxList>
                            </div>
                        </td>
                       <td>
                            <asp:CustomValidator ID="customCheckBoxListValidator" runat="server" ErrorMessage="至少选择一项"
                                ClientValidationFunction="ValidateOptions" Display="Dynamic"  ForeColor="Red"/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td height="40">
                了解活动：<br />
            </td>
            <td>
                您从以下渠道得知本活动？
                <asp:DropDownList ID="txtFrom" runat="server">
                    <asp:ListItem Text="请选择" Value="-1" Selected="True">
                    </asp:ListItem>
                    <asp:ListItem Text="搜索引擎" Value="1">
                    </asp:ListItem>
                    <asp:ListItem Text="朋友介绍" Value="2">
                    </asp:ListItem>
                    <asp:ListItem Text="平面媒介" Value="3">
                    </asp:ListItem>
                    <asp:ListItem Text="网站新闻" Value="4">
                    </asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td height="60" colspan="2" align="center" valign="bottom">
                <asp:Button ID="btnInsert" Text="确认报名" runat="server" />
            </td>
        </tr>
    </table>

效果如图：

邀月工作室