jquery.validate动态更改校验规则
有时候表单中有多个字段是相互关联的，以下遇到的就是证件类型和证件号码的关联，在下拉框中选择不同的证件类型，证件号码的值的格式都是不同的，这就需要动态的改变校验规则。
点击(此处)折叠或打开
1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd">
2. <html>
3. <head>
4. <meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
5. <script src="jquery-1.7.2.js"type="text/javascript"></script>
6. <script src="jquery.validate.js"type="text/javascript"></script>
7. <script src="validate.addmethod.js"type="text/javascript"></script>
8. <script src="messages_zh.js"type="text/javascript"></script>
9. <script type="text/javascript">
10.
11. //===================放在validate.addmethod.js中=========================
12.
13. //检查号码是否符合规范，包括长度，类型
14. isCardNo = function(card)
15. {
16. //⾝份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后⼀位是校验位，可能为数字或字符X
17. var reg=/(^\d{15}$)|(^\d{17}(\d|X)$)/;
18.    st(card)=== false)
19. {
20.        return false;
21. }
22.    return true;
23. };
24.
25. //取⾝份证前两位，校验省份
26. checkProvince = function(card)
27. {
28. var province = card.substr(0,2);
29.    if(vcity[province]== undefined)
30. {
31.        return false;
32. }
33.    return true;
34. };
35.
36. //检查⽣⽇是否正确
37. checkBirthday = function(card)
38. {
39. var len = card.length;
40. //⾝份证15位时，次序为省（3位）市（3位）年（2位）⽉（2位）⽇（2位）校验位（3位），皆为数字
41.    if(len =='15')
42. {
43. var re_fifteen =/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
44. var arr_data = card.match(re_fifteen);
45. var year = arr_data[2];
46. var month = arr_data[3];
47. var day = arr_data[4];
48. var birthday = new Date('19'+year+'/'+month+'/'+day);
49.        return verifyBirthday('19'+year,month,day,birthday);
50. }
51. //⾝份证18位时，次序为省（3位）市（3位）年（4位）⽉（2位）⽇（2位）校验位（4位），校验位末尾可能为X
52.    if(len =='18')
53. {
54. var re_eighteen =/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
55. var arr_data = card.match(re_eighteen);
56. var year = arr_data[2];
57. var month = arr_data[3];
58. var day = arr_data[4];
59. var birthday = new Date(year+'/'+month+'/'+day);
60.        return verifyBirthday(year,month,day,birthday);
61. }
62.    return false;
63. };
64.
65. //校验⽇期
66. verifyBirthday = function(year,month,day,birthday)
67. {
68. var now = new Date();
69. var now_year = FullYear();
70. //年⽉⽇是否合理
71.    FullYear()== year &&(Month()+ 1)== month && Date()== day)
72. {
73. //判断年份的范围（3岁到100岁之间)
74. var time = now_year - year;
75.        if(time >= 3 && time <= 100)
76. {
77.            return true;
78. }
79.        return false;
80. }
81.    return false;
82. };
83. //校验位的检测
84. checkParity = function(card)
85. {
86. //15位转18位
87.    card = changeFivteenToEighteen(card);
88. var len = card.length;
89.    if(len =='18')
90. {
91. var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
92. var arrCh = new Array('1','0','X','9','8','7','6','5','4','3','2');
93. var cardTemp = 0,i, valnum;
94. for(i= 0;i< 17;i++)
95. {
96.            cardTemp += card.substr(i, 1)* arrInt[i];
97. }
98.        valnum = arrCh[cardTemp % 11];
99.        if (valnum == card.substr(17, 1))
100. {
101.            return true;
102. }
103.        return false;
104. }
105.    return false;
106. };
107. //15位转18位⾝份证号
108. changeFivteenToEighteen = function(card)
109. {
110.    if(card.length =='15')
111. {
112. var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
113. var arrCh = new Array('1','0','X','9','8','7','6','5','4','3','2');
114. var cardTemp = 0,i;
115.        card = card.substr(0, 6)+'19'+ card.substr(6, card.length - 6);
116. for(i= 0;i< 17;i++)
117. {
118.            cardTemp += card.substr(i, 1)* arrInt[i];
119. }
120.        card += arrCh[cardTemp % 11];
121.        return card;
122. }
123.    return card;
124. };
125. isIdCardNo = function(card)
126. {
127. //是否为空
128.    if(card ==='')
129. {
130.        return false;
131. }
132. //校验长度，类型
133.    if(isCardNo(card)=== false)
134. {
135.        return false;
136. }
137. //检查省份
138.    if(checkProvince(card)=== false)
139. {
140.        return false;
141. }
142. //校验⽣⽇
143.    if(checkBirthday(card)=== false)
144. {
145.        return false;
146. }
147. //检验位的检测
148.    if(checkParity(card)=== false)
149. {
150.        return false;
151. }
152.    return true;
153. };
154. //⾝份证号码验证
155.    jQuery.validator.addMethod("isIdCardNo", function(value, element){
156.      return this.optional(element)|| isIdCardNo(value);
157. },"请正确输⼊您的⾝份证号码");
158. //护照号格式验证
159.    jQuery.validator.addMethod("isPassport", function(value,element){
160. var passport ="/(P/d{7})|(G/d{8})/";
161.          return this.optional(element)||(st(value));
162. },"请正确填写您的护照号");
163. //===================放在validate.addmethod.js中END=========================jquery怎么进行验证
164. $(document).ready(function(){
165.    $("#ctc_form").validate({
166.        ignore: "",//开启hidden验证， 1.9版本后默认关闭
167. rules:{
168. "qq":{
169.                required: true,
170. //minlength: 2
171.                stringCheck:true
172. }
173. }
174. });
175.    $("#papersType").change( function(){
176. var type= $("#papersType").find("option:selected").text();
177.        if(type=="⾝份证"){
178.            $("#papersCode").rules("remove");
179.            $("#papersCode").rules("add",{ required: true,isIdCardNo: true, messages: { required: "请正确输⼊您的⾝份证号码"}}); 180. }else if(type=="军官证"){
181.            $("#papersCode").rules("remove");
182.            $("#papersCode").rules("add",{ required: true,stringCheck:true,minlength:6,maxlength:8, messages: { required: "请输⼊正确的军官证号"}});
183. }else if(type=="护照"){
184.            $("#papersCode").rules("remove");
185.            $("#papersCode").rules("add",{ required: true,isPassport:true, messages: { required: "请正确填写您的护照号"}});
186. }else if(type=="机动车驾驶证"){
187.            $("#papersCode").rules("remove");
188.            $("#papersCode").rules("add",{ required: true,stringCheck:true, messages: { required: "机动车驾驶证是必填"}});
189. }else{
190.            $("#papersCode").rules("remove");
191.            $("#papersCode").rules("add",{ required: true,stringCheck:true, messages: { required: "必填"}});
192. }
193. });
194. });
195. </script>
196. <title></title>
197. </head>
198. <body>
199. <div class="m_right">
200. <form id="ctc_form"method="post"action="">
201. <table width="700"border="0"cellspacing="0"cellpadding="0"align="center">
202. <tr>
203. <td width="90"class="m_r_s_con_td"><span class="required_mark">*</span>证件类型</td>
204. <td width="275"class="m_r_s_con_text"><label for="select"></label>
205. <select name="papersType"id="papersType">
206. <option value="0">请选择</option
207. <option value="1">⾝份证</option>
208. <option value="2">军官证</option>
209. <option value="3">护照</option>
210. <option value="4">机动车驾驶证</option>
211. <option value="5">其他</option>
212. </select></td>
213. <td class="m_r_s_con_text"></td>
214. </tr>
215. <tr>
216. <td width="90"class="m_r_s_con_td"><span class="required_mark">*</span>证件证号</td>
217. <td width="275"class="m_r_s_con_text"> 
218. <input name="papersCode"id="papersCode"/>
219. </td>
220. <td class="m_r_s_con_text"></td>
221. </tr>
222. <tr>
223. <td width="90"class="m_r_s_con_td"><span class="required_mark">*</span>QQ </td>
224. <td width="275"class="m_r_s_con_text"> 
225. <input name="qq"id="qq"/>
226. </td>
227. <td class="m_r_s_con_text"></td>
228. </tr>
229. </table>
230. <input type="submit"value="添加"/>
231. </form>
232. </div>
233. </body>
234. </html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。