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

点击(此处)折叠或打开

  • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • <html>
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  • <script src="jquery-1.7.2.js" type="text/javascript"></script>
  • <script src="jquery.validate.js" type="text/javascript"></script>
  • <script src="validate.addmethod.js" type="text/javascript"></script>
  • <script src="messages_zh.js" type="text/javascript"></script>
  • <script type="text/javascript">
  • //===================放在validate.addmethod.js中=========================
  • //检查号码是否符合规范,包括长度,类型
  • isCardNo = function(card)
  • {
  •     //身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X
  •     var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
  •     if(reg.test(card) === false)
  •     {
  •         return false;
  •     }
  •     return true;
  • };
  • //取身份证前两位,校验省份
  • checkProvince = function(card)
  • {
  •     var province = card.substr(0,2);
  •     if(vcity[province] == undefined)
  •     {
  •         return false;
  •     }
  •     return true;
  • };
  • //检查生日是否正确
  • checkBirthday = function(card)
  • {
  •     var len = card.length;
  •     //身份证15位时,次序为省(3位)市(3位)年(2位)月(2位)日(2位)校验位(3位),皆为数字
  •     if(len == '15')
  •     {
  •         var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/; 
  •         var arr_data = card.match(re_fifteen);
  •         var year = arr_data[2];
  •         var month = arr_data[3];
  •         var day = arr_data[4];
  •         var birthday = new Date('19'+year+'/'+month+'/'+day);
  •         return verifyBirthday('19'+year,month,day,birthday);
  •     }
  •     //身份证18位时,次序为省(3位)市(3位)年(4位)月(2位)日(2位)校验位(4位),校验位末尾可能为X
  •     if(len == '18')
  •     {
  •         var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
  •         var arr_data = card.match(re_eighteen);
  •         var year = arr_data[2];
  •         var month = arr_data[3];
  •         var day = arr_data[4];
  •         var birthday = new Date(year+'/'+month+'/'+day);
  •         return verifyBirthday(year,month,day,birthday);
  •     }
  •     return false;
  • };
  • //校验日期
  • verifyBirthday = function(year,month,day,birthday)
  • {
  •     var now = new Date();
  •     var now_year = now.getFullYear();
  •     //年月日是否合理
  •     if(birthday.getFullYear() == year && (birthday.getMonth() + 1) == month && birthday.getDate() == day)
  •     {
  •         //判断年份的范围(3岁到100岁之间)
  •         var time = now_year - year;
  •         if(time >= 3 && time <= 100)
  •         {
  •             return true;
  •         }
  •         return false;
  •     }
  •     return false;
  • };
  • //校验位的检测
  • checkParity = function(card)
  • {
  •     //15位转18位
  •     card = changeFivteenToEighteen(card);
  •     var len = card.length;
  •     if(len == '18')
  •     {
  •         var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
  •         var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'); 
  •         var cardTemp = 0, i, valnum; 
  •         for(i = 0; i < 17; i ++) 
  •         { 
  •             cardTemp += card.substr(i, 1) * arrInt[i]; 
  •         } 
  •         valnum = arrCh[cardTemp % 11]; 
  •         if (valnum == card.substr(17, 1)) 
  •         {
  •             return true;
  •         }
  •         return false;
  •     }
  •     return false;
  • };
  • //15位转18位身份证号
  • changeFivteenToEighteen = function(card)
  • {
  •     if(card.length == '15')
  •     {
  •         var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
  •         var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'); 
  •         var cardTemp = 0, i; 
  •         card = card.substr(0, 6) + '19' + card.substr(6, card.length - 6);
  •         for(i = 0; i < 17; i ++) 
  •         { 
  •             cardTemp += card.substr(i, 1) * arrInt[i]; 
  •         } 
  •         card += arrCh[cardTemp % 11]; 
  •         return card;
  •     }
  •     return card;
  • };
  • isIdCardNo = function(card)
  • {
  •     //是否为空
  •     if(card === '')
  •     {
  •         return false;
  •     }
  •     //校验长度,类型
  •     if(isCardNo(card) === false)
  •     {
  •         return false;
  •     }
  •     //检查省份
  •     if(checkProvince(card) === false)
  •     {
  •         return false;
  •     }
  •     //校验生日
  •     if(checkBirthday(card) === false)
  •     {
  •         return false;
  •     }
  •     //检验位的检测
  •     if(checkParity(card) === false)
  •     {
  •         return false;
  •     }
  •     return true;
  • };
  •     // 身份证号码验证 
  •     jQuery.validator.addMethod("isIdCardNo", function(value, element) { 
  •      return this.optional(element) || isIdCardNo(value); 
  •     }, "请正确输入您的身份证号码");
  •     // 护照号格式验证
  •     jQuery.validator.addMethod("isPassport", function(value,element) {
  •           var passport = "/(P/d{7})|(G/d{8})/";
  •          return this.optional(element) || (passport.test(value));
  •         }, "请正确填写您的护照号");
  • //===================放在validate.addmethod.js中END=========================
  • $(document).ready(function() {
  •     $("#ctc_form").validate({
  •         ignore: "", // 开启hidden验证, 1.9版本后默认关闭
  •         rules: {
  •             "qq": {
  •                 required: true,
  •                 //minlength: 2
  •                 stringCheck:true
  •             }
  •         }
  •     });
  •     $("#papersType").change( function() {
  •         var type = $("#papersType").find("option:selected").text();
  •         if(type=="身份证"){
  •             $("#papersCode").rules("remove");
  •             $("#papersCode").rules("add", { required: true,isIdCardNo: true, messages: { required: "请正确输入您的身份证号码"} });
  •         }else if(type == "军官证"){
  •             $("#papersCode").rules("remove");
  •             $("#papersCode").rules("add", { required: true,stringCheck:true,minlength:6,maxlength:8, messages: { required: "请输入正确的军官证号"} });
  •         }else if(type == "护照"){
  •             $("#papersCode").rules("remove");
  •             $("#papersCode").rules("add", { required: true,isPassport:true, messages: { required: "请正确填写您的护照号"} });
  •         }else if(type == "机动车驾驶证"){
  •             $("#papersCode").rules("remove");
  •             $("#papersCode").rules("add", { required: true,stringCheck:true, messages: { required: "机动车驾驶证是必填"} });
  •         }else{
  •             $("#papersCode").rules("remove");
  •             $("#papersCode").rules("add", { required: true,stringCheck:true, messages: { required: "必填"} });
  •         }
  •     });
  • });
  • </script>
  • <title></title>
  • </head>
  • <body>
  •   <div class="m_right">
  •     <form id="ctc_form" method="post" action="">
  •         <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse;border-spacing: 0; border:0;margin:0px auto;">
  •               <tr>
  •                 <td width="90" class="m_r_s_con_td"><span class="required_mark">*</span>证件类型 </td>
  •                 <td width="275" class="m_r_s_con_text"><label for="select"></label>
  •                   <select name="papersType" id="papersType">
  •                     <option value="0">请选择</option
  •                     <option value="1">身份证</option>
  •                     <option value="2">军官证</option>
  •                     <option value="3">护照</option>
  •                     <option value="4">机动车驾驶证</option>
  •                     <option value="5">其他</option>
  •                 </select></td>
  •                 <td class="m_r_s_con_text"></td>
  •               </tr> 
  •               <tr>
  •                 <td width="90" class="m_r_s_con_td"><span class="required_mark">*</span>证件证号 </td>
  •                 <td width="275" class="m_r_s_con_text">&nbsp;
  •                 <input name="papersCode" id="papersCode"/>
  •                 </td>
  •                 <td class="m_r_s_con_text"></td>
  •               </tr>
  •               <tr>
  •                 <td width="90" class="m_r_s_con_td"><span class="required_mark">*</span>QQ </td>
  •                 <td width="275" class="m_r_s_con_text">&nbsp;
  •                 <input name="qq" id="qq"/>
  •                 </td>
  •                 <td class="m_r_s_con_text"></td>
  •               </tr> 
  •          </table>
  •       <input type="submit" value="添加" />
  •     </form>
  •   </div>
  • </body>
  • </html>
  • 相关文章: