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>
  • 相关阅读:
    dfs模板
    24点
    个人阅读三
    个人阅读作业2：关于项目经历的心得
    代码复审
    Pair Project1:电梯控制程序
    第二次个人项目——阅读经典教材
    THE First Individual Project
    个人阅读作业3
    个人阅读作业2
  • 原文地址：https://www.cnblogs.com/wangluochong/p/3751171.html
Copyright © 2011-2022 走看看