Jquery.Validate AJAX验证

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

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

主要js如下：

[javascript]  view plain copy print ?

1. <script type="text/javascript">  
2.     
3.     //DropDownList验证方法  
4.      $.validator.addMethod('selectNone',  
5.           function(value, element) {  
6.               return this.optional(element) ||(value!= -1);  
7.           }, "请选择至少一项！");  
8.   
9.     //ChekcBoxList验证方法  
10.   
11.       /*  
12.      $.validator.addMethod('atLeastOneChecked', function(value, element) { 
13.             var checkedCount = 0; 
14.               $("input[name^='" + <%=txtHistory.UniqueID %> + "']").each(function() {  
15.                if ($(this).attr('checked')) { checkedCount++; }  
16.                }); 
17.               return checkedCount>0; 
18.              
19.         },"请选择至少一项"); 
20.         */  
21.           
22.         // 手机号码验证         
23.      $.validator.addMethod("isMobile", function(value, element) {         
24.          var length = value.length;     
25.          var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;     
26.          return this.optional(element) || (length == 11 && mobile.test(value));         
27.      }, "请正确填写您的手机号码");         
28.       
29.          $(document).ready(function () {  
30.          
31.         //验证CheckBoxList  
32.          ValidateOptions = function(sender, args) {  
33.          args.IsValid=false;  
34.          var len = $("#history_DIV input:checked").length;      
35.          args.IsValid = (len>0);  
36.         };  
37.   
38.   
39.         $("#form1").validate(  
40.         {  
41.         rules: {  
42.             <%=txtVName.UniqueID %>: {  
43.                 required: true  
44.             },  
45.                 <%=txtEmail.UniqueID %>: {                         
46.                 required: true,  
47.                 email:true  
48.             },  
49.                 <%=txtRemark.UniqueID %>: {  
50.                     required: true  
51.                 },  
52.                 <%=txtVSex.UniqueID %>: {  
53.                 required: function(element) {   
54.                     return $("input:radio[name='txtVSex']:checked").val()!="";    
55.                     }   
56.                                         },  
57.                 <%=txtFrom.UniqueID %>:{  
58.                 selectNone: true  
59.                 },  
60.                          
61.                 <%=txtMobile.UniqueID %>:{  
62.                 required:true,  
63.                 isMobile:true  
64.                 },  
65.                 <%=txtHistory.UniqueID %>:{  
66.                 //required: function(element) {   
67.                 //return ($("#history_DIV input:checked").length)>0;}  
68.                 //return $("#<%=txtHistory.UniqueID %> input[@type=checkbox]:checked").size()>0;   
69.                 // return $("input[name^='<%=txtHistory.UniqueID %>']").length>0  
70.                 //atLeastOneChecked: true  
71.                            
72.                 }  
73.   
74.             },  
75.             messages: {  
76.                     <%=txtRemark.UniqueID %>:   
77.                     {  
78.                     required: "请填写报名理由"  
79.                     },  
80.                     <%=txtVSex.UniqueID %>:   
81.                     {  
82.                     required: "请选择性别"  
83.                     },  
84.                              
85.                     <%=txtMobile.UniqueID %>:{  
86.                     required: "请填写手机号码"  
87.                     },  
88.                     <%=txtHistory.UniqueID %>:{  
89.                     required: "请选择届数"  
90.                     }  
91.             }             
92.         });  
93.       });  
94.     </script>  

前台页面如下：

[html]  view plain copy print ?

1. <table width="750" border="0" cellpadding="0" cellspacing="5">  
2.         <tr>  
3.             <td width="150" height="40">  
4.                 真实姓名：  
5.             </td>  
6.             <td width="600">  
7.                 <asp:TextBox ID="txtVName" runat="Server" Width="280px" />  
8.             </td>  
9.         </tr>  
10.         <tr>  
11.             <td height="40">  
12.                 性别：  
13.             </td>  
14.             <td>  
15.                 <asp:RadioButtonList ID="txtVSex" runat="server" RepeatDirection="Horizontal">  
16.                     <asp:ListItem Text="男" Value="男"></asp:ListItem>  
17.                     <asp:ListItem Text="女" Value="女"></asp:ListItem>  
18.                 </asp:RadioButtonList>  
19.                 <br />  
20.             </td>  
21.         </tr>  
22.         <tr>  
23.             <td height="40">  
24.                 手机号码：<br />  
25.             </td>  
26.             <td>  
27.                 <asp:TextBox ID="txtMobile" runat="Server" Width="280px" />  
28.                 <span>请填写真实手机号码方便接收活动通知</span>  
29.             </td>  
30.         </tr>  
31.         <tr>  
32.             <td height="40">  
33.                 E-Mail：<br />  
34.             </td>  
35.             <td>  
36.                 <asp:TextBox ID="txtEmail" runat="Server" Width="280px" CssClass="email" />  
37.                 <span>用于接收邮件通知</span>  
38.             </td>  
39.         </tr>  
40.         <tr>  
41.             <td height="40">  
42.                 职业：<br />  
43.             </td>  
44.             <td>  
45.                 <asp:RadioButtonList ID="txtC_Name" runat="server" RepeatDirection="Horizontal">  
46.                     <asp:ListItem Text="学生" Value="1"></asp:ListItem>  
47.                     <asp:ListItem Text="职员" Value="2"></asp:ListItem>  
48.                     <asp:ListItem Text="经理" Value="3"></asp:ListItem>  
49.                     <asp:ListItem Text="家庭主妇" Value="4"></asp:ListItem>  
50.                     <asp:ListItem Text="自由职业者" Value="5"></asp:ListItem>  
51.                 </asp:RadioButtonList>  
52.             </td>  
53.         </tr>  
54.         <tr>  
55.             <td height="40">  
56.                 报名人数：<br />  
57.             </td>  
58.             <td>  
59.                 <asp:RadioButtonList ID="txtC_EName" runat="server" RepeatDirection="Horizontal">  
60.                     <asp:ListItem Text="就我一人" Value="1"></asp:ListItem>  
61.                     <asp:ListItem Text="两人" Value="2"></asp:ListItem>  
62.                     <asp:ListItem Text="三人" Value="3"></asp:ListItem>  
63.                 </asp:RadioButtonList>  
64.             </td>  
65.         </tr>  
66.         <tr>  
67.             <td height="40">  
68.                 报名理由:  
69.             </td>  
70.             <td>  
71.                 <asp:TextBox TextMode="MultiLine" Columns="50" Rows="5" ID="txtRemark" runat="Server" />  
72.                 <br />  
73.                 <span>优质理由怎么写？1.描述您为什么要申请2.描述活动那里吸引您 3.个性化自由发挥</span>  
74.             </td>  
75.         </tr>  
76.         <tr>  
77.             <td height="40">  
78.                 参加过的：<br />  
79.             </td>  
80.             <td>  
81.                 <table>  
82.                     <tr>  
83.                         <td>  
84.                             <div id="history_DIV">  
85.                                 <asp:CheckBoxList ID="txtHistory" runat="server" RepeatDirection="Horizontal">  
86.                                     <asp:ListItem Text="无" Value="0">  
87.                                     </asp:ListItem>  
88.                                     <asp:ListItem Text="第一届" Value="1">  
89.                                     </asp:ListItem>  
90.                                     <asp:ListItem Text="第二届" Value="2">  
91.                                     </asp:ListItem>  
92.                                     <asp:ListItem Text="第三届" Value="3">  
93.                                     </asp:ListItem>  
94.                                 </asp:CheckBoxList>  
95.                             </div>  
96.                         </td>  
97.                        <td>  
98.                             <asp:CustomValidator ID="customCheckBoxListValidator" runat="server" ErrorMessage="至少选择一项"  
99.                                 ClientValidationFunction="ValidateOptions" Display="Dynamic"  ForeColor="Red"/>  
100.                         </td>  
101.                     </tr>  
102.                 </table>  
103.             </td>  
104.         </tr>  
105.         <tr>  
106.             <td height="40">  
107.                 了解活动：<br />  
108.             </td>  
109.             <td>  
110.                 您从以下渠道得知本活动？  
111.                 <asp:DropDownList ID="txtFrom" runat="server">  
112.                     <asp:ListItem Text="请选择" Value="-1" Selected="True">  
113.                     </asp:ListItem>  
114.                     <asp:ListItem Text="搜索引擎" Value="1">  
115.                     </asp:ListItem>  
116.                     <asp:ListItem Text="朋友介绍" Value="2">  
117.                     </asp:ListItem>  
118.                     <asp:ListItem Text="平面媒介" Value="3">  
119.                     </asp:ListItem>  
120.                     <asp:ListItem Text="网站新闻" Value="4">  
121.                     </asp:ListItem>  
122.                 </asp:DropDownList>  
123.             </td>  
124.         </tr>  
125.         <tr>  
126.             <td height="60" colspan="2" align="center" valign="bottom">  
127.                 <asp:Button ID="btnInsert" Text="确认报名" runat="server" />  
128.             </td>  
129.         </tr>  
130.     </table>  

效果如图：

源码下载1

源码下载2