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

点击(此处)折叠或打开

  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. Window环境下RabbitMQ 添加用户、设置角色和权限

    基本上新增用户.角色和权限的方法都一样,大概如下: REM 添加一个帐号 密码 rabbitmqctl.bat add_user zhangfujun zhangfujun123 REM 添加角色 r ...

  2. OneZero第二周第二次站立会议（2016.3.29）

    会议时间:2016年3月29日  13:05~13:16 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论,确定会后修改内容或分配下一步任务. 会议内容:以下是会议插图 1 ...

  3. Python模块-pandas

    目录 数据读取 数据探索 数据清洗 数据清洗 类型转换 缺失值 重复值 值替换 修改表结构 新增列 删除列 删除行 修改列名 数据分组(数值变量) 数据分列(分类变量) 设置索引 排序 数据筛选/切片 ...

  4. 如何用Delphi开发网游外挂

    1.动作式,所谓动作式,就是指用API发命令给窗口或API控制鼠标.键盘等,使游戏里的人物进行流动或者攻击,最早以前的“石器”外挂就是这种方式.2.本地修改式,这种外挂跟传统上的一些游戏修改器没有两样 ...

  5. 【转】在SpringMVC Controller中注入Request成员域

    原文链接:https://www.cnblogs.com/abcwt112/p/7777258.html 原文作者:abcwt112 主题 在工作中遇到1个问题....我们定义了一个Controlle ...

  6. 【Vue学习笔记1】基于Vue2.2.6版本

    记录一下自己关于Vue学习的过程,便于以后归纳整理以及复习. 1.下载引用vue.js 下载: npm install vue ,然后引用. 或直接线上引用: <script src=" ...

  7. 学习《Unix/Linux编程实践教程》(1)：Unix 系统编程概述

    0.目录 1.概念 2.系统资源 3.学习方法 4.从用户的角度来理解 Unix 4.1 登录--运行程序--注销 4.2 目录操作 4.3 文件操作 5.从系统的角度来理解 Unix 5.1 网络桥 ...

  8. css 2D转换总结

    CSS中2D转换的形式是这样的: 选择器{ transform:转换函数(参数,参数): } 其中transform(是transform 不是transfrom)定义元素的2D或者3D转换: 2D转 ...

  9. 后Hadoop时代的大数据技术思考：数据即服务

    1. Hadoop 的神话正在破灭 IBM leads BigInsights for Hadoop out behind barn. Shots heard IBM has announced th ...

  10. 洛谷P3935 Calculating（整除分块）

    题目链接:洛谷 题目大意:定义 $f(x)=\prod^n_{i=1}(k_i+1)$,其中 $x$ 分解质因数结果为 $x=\prod^n_{i=1}{p_i}^{k_i}$.求 $\sum^r_{ ...