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

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>

效果如图：

源码下载1

源码下载2

邀月注：本文版权由邀月和CSDN共同所有，转载请注明出处。
助人等于自助! [email protected]