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>
效果如图: