zoukankan      html  css  js  c++  java

  • jquery.validate动态更改校验规则

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

    点击(此处)折叠或打开

    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">
    11. //===================放在validate.addmethod.js中=========================
    13. //检查号码是否符合规范，包括长度，类型
    14. isCardNo = function(card)
    15. {
    16.     //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
    17.     var reg = /(^d{15}$)|(^d{17}(d|X)$)/;
    18.     if(reg.test(card) === false)
    19.     {
    20.         return false;
    21.     }
    22.     return true;
    23. };
    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. };
    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. };
    65. //校验日期
    66. verifyBirthday = function(year,month,day,birthday)
    67. {
    68.     var now = new Date();
    69.     var now_year = now.getFullYear();
    70.     //年月日是否合理
    71.     if(birthday.getFullYear() == year && (birthday.getMonth() + 1) == month && birthday.getDate() == 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) || (passport.test(value));
    162.         }, "请正确填写您的护照号");
    163. //===================放在validate.addmethod.js中END=========================
    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" style="border-collapse: collapse;border-spacing: 0; border:0;margin:0px auto;">
    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">&nbsp;
    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">&nbsp;
    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>
  • 相关阅读:
    Kubernetes 集成研发笔记
    Rust 1.44.0 发布
    Rust 1.43.0 发布
    PAT 甲级 1108 Finding Average (20分)
    PAT 甲级 1107 Social Clusters (30分)（并查集）
    PAT 甲级 1106 Lowest Price in Supply Chain (25分) (bfs)
    PAT 甲级 1105 Spiral Matrix (25分)（螺旋矩阵，简单模拟）
    PAT 甲级 1104 Sum of Number Segments (20分)(有坑，int *int 可能会溢出)
    java 多线程 26 ： 线程池
    OpenCV_Python —— （4）形态学操作
  • 原文地址：https://www.cnblogs.com/wangluochong/p/3751171.html
Copyright © 2011-2022 走看看