有时候表单中有多个字段是相互关联的，以下遇到的就是证件类型和证件号码的关联，在下拉框中选择不同的证件类型，证件号码的值的格式都是不同的，这就需要动态的改变校验规则。

点击(此处)折叠或打开

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

jquery.validate动态更改校验规则的更多相关文章

  1. jquery.validate动态更改校验规则 【转】

    有时候表单中有多个字段是相互关联的,以下遇到的就是证件类型和证件号码的关联,在下拉框中选择不同的证件类型,证件号码的值的格式都是不同的,这就需要动态的改变校验规则. <!DOCTYPE html ...

  2. jQuery Validate 验证，校验规则写在控件中的具体例子

    将校验规则写到控件中 <script src="../js/jquery.js" type="text/javascript"></scrip ...

  3. Jquery Validate 动态添加校验

    <cx:script> <script type="text/javascript"> //修改表单验证,提交 $(document).ready(func ...

  4. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  5. 使用JQuery.Validate插件来校验页面表单有效性

    使用JQuery.Validate插件来校验页面表单有效性​1. [代码] 常见的注册表单元素 <form action="#" method="post" ...

  6. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  7. jQuery.validate表单校验+bootstrap

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  8. Jquery Validate动态添加和删除校验规则

    以下面文本框为例, <input type="text"name="username" id="username"/> 我们要让 ...

  9. jQuery.validate 的form校验

    jQuery验证框架 : 基本html代码: <script src="js/jquery-1.9.1.js"></script> <script s ...

随机推荐

  1. 微软必应词典UWP -2017春

    必应UWP调研,评测 软件平台:windows10 软件名称:微软必应词典 软件类型:UWP Bug Bug1 当在文本框中进行输入时,在谷歌拼音输入法状态下,无法使用Shift键切换到谷歌拼音的纯英 ...

  2. Alpha 冲刺八

    团队成员 051601135 岳冠宇 051604103 陈思孝 031602629 刘意晗 031602248 郑智文 031602234 王淇 会议照片 项目燃尽图 项目进展 完善各自部分 项目描 ...

  3. Activiti的ACT_GE_PROPERTY表初始化

    create table ACT_GE_PROPERTY ( NAME_ ), VALUE_ ), REV_ integer, primary key (NAME_) ) ENGINE=InnoDB ...

  4. ehlib使用内存表的方法

    ehlib提供了一个TMemTableEh控件,这个控件不需要连接数据库就可以在ehlib中显示数据,在做一些虚的表格时比较有用. 简单的使用主要有这几个步骤: 1.添加量过控件Tdatasource ...

  5. pixi.js v5 快速了解

    pixi.js 追求简单,  性能,高价值. pixi.js v5将是一交比较大的升级,代码更加精简,性能更加强悍,功能更加丰富,扩展更加高效 pixi.js一步一脚印,版本持续稳定的更新, 深入学习 ...

  6. Ubuntu17安装maven3.5.2

    1.下载maven 源码文件.tar.gz 2.解压源文件sudo tar -zxvf .tar.gz文件 3.配置/etc/profile文件 export MAVEN_HOME=/app/java ...

  7. java 强制转换之降级

    大空间的数据类型向小空间的数据类型去转换. 语法:(目标数据类型)变量名 当大空间数据类型转换给小空间时且超过小空间的容量时,编译不会出错,但是会丢失精度 例如 int a = 128 抓换byte ...

  8. MT【177】三个乘积和

    对任意 2 个 1,2,3,4,5,6 的全排列 $(a_1,a_2,a_3,a_4,a_5,a_6)$ 和 $(b_1,b_2,b_3,b_4,b_5,b_6)$,求$\displaystyle S ...

  9. 【BZOJ5281】Talent Show（分数规划）

    [BZOJ5281]Talent Show(分数规划) 题面 BZOJ 洛谷 题解 二分答案直接就是裸的分数规划,直接跑背包判断是否可行即可. #include<iostream> #in ...

  10. 动态生成web表-asp.net table

    1. 页面上定义一个server 的table <table style="width: 100%" id="tbContent" runat=" ...