jquery validation驗證身份證號、護照、電話號碼、email
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <!-- TemplateBeginEditable name="doctitle" --> <title>無標題文檔</title> <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"></script> <script src="lib/card.js" type="text/javascript"></script> <script src="lib/validata.js" type="text/javascript"></script> <style type="text/css"> em.success{ background:url("images/tips_arrow.gif") no-repeat left 0px; padding-left:16px; margin-left:2px; } em.error{ background:url("images/tips_arrow.gif") no-repeat left -51px; display:inline; padding-left:10px; font-style:normal; font-size:11px; margin-left:2px; font-family:12px/162% Arial, Helvetica, sans-serif; } </style> </head> <body> <form class="cmsform" id="commentForm" method="get" action=""> <p> <label for="cusername">姓名</label><em>*</em> <input id="cusername" name="username" size="25" /></p> <p> <label for="cemail">電子郵件</label><em>*</em> <input id="cemail" name="email" size="25" />
</p> <p> <label for="card">身份證號</label><em>*</em> <input id="card" name="card" size="25"/>
</p> <p> <label for="passport">護照編號</label><em>*</em> <input id="passport" name="passport" size="25"/>
</p> <p> <label for="phone">電話號碼</label><em>*</em> <input id="phone" name="phone" size="25" />
</p> </form> </body> </html></pre>
validata.js
$(function(){ $.validator.setDefaults({ submitHandler: function(form) { form.submit(); } });// 字符驗證 jQuery.validator.addMethod("stringCheck", function(value, element) { return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); }, "只能包括中文字、英文字母、數字和下劃線"); // 中文字兩個字節 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){ length++; } } return this.optional(element) || ( length >= param[0] && length <= param[1] ); }, "請確保輸入的值在3-15個字節之間(一個中文字算2個字節)"); // 身份證號碼驗證 jQuery.validator.addMethod("isIdCardNo", function(value, element) { return this.optional(element) || idCardNoUtil.checkIdCardNo(value); }, "請正確輸入您的身份證號碼"); //護照編號驗證 jQuery.validator.addMethod("passport", function(value, element) { return this.optional(element) || checknumber(value); }, "請正確輸入您的護照編號"); // 手機號碼驗證 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "請正確填寫您的手機號碼"); // 電話號碼驗證 jQuery.validator.addMethod("isTel", function(value, element) { var tel = /^\d{3,4}-?\d{7,9}$/; //電話號碼格式010-12345678 return this.optional(element) || (tel.test(value)); }, "請正確填寫您的電話號碼"); // 聯系電話(手機/電話皆可)驗證 jQuery.validator.addMethod("isPhone", function(value,element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; var tel = /^\d{3,4}-?\d{7,9}$/; return this.optional(element) || (tel.test(value) || mobile.test(value)); }, "請正確填寫您的聯系電話"); // 郵政編碼驗證 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "請正確填寫您的郵政編碼"); //開始驗證 $('#commentForm').validate({ rules: { username: { required:true, stringCheck:true, byteRangeLength:[3,15] }, email:{ required:true, email:true }, phone:{ required:true, isMobile:true }, address:{ required:true, stringCheck:true, byteRangeLength:[3,100] }, card:{ required:true, isIdCardNo:true }, passport:{ required:true, passport:true } }, messages:{ username: { required: "請填寫用戶名", stringCheck: "用戶名只能包括中文字、英文字母、數字和下劃線", byteRangeLength: "用戶名必須在3-15個字符之間(一個中文字算2個字符)" }, email:{ required: "<font color=red>請輸入一個Email地址</fond>", email: "請輸入一個有效的Email地址" }, phone:{ required: "請輸入您的聯系電話", isPhone: "請輸入一個有效的聯系電話" }, address:{ required: "請輸入您的聯系地址", stringCheck: "請正確輸入您的聯系地址", byteRangeLength: "請詳實您的聯系地址以便于我們聯系您" }, card:{ required:"請輸入身份證號", isIdCardNo:"請輸入正確的身份證號" }, passport:{ required:"請輸入護照編號", passport:"請輸入正確的護照編號" } }, focusInvalid: false, onkeyup: false, errorPlacement: function(error, element) { error.appendTo( element.parent()); }, errorElement:"em", error:function(label){label.text(" ").addClass("error");} });})</pre>
card.js
var idCardNoUtil = { provinceAndCitys: {11:"北京",12:"天津",13:"河北",14:"山西",15:"內蒙古",21:"遼寧",22:"吉林",23:"黑龍江", 31:"上海",32:"江蘇",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山東",41:"河南",42:"湖北",43:"湖南",44:"廣東", 45:"廣西",46:"海南",50:"重慶",51:"四川",52:"貴州",53:"云南",54:"西藏",61:"陜西",62:"甘肅",63:"青海",64:"寧夏", 65:"新疆",71:"臺灣",81:"香港",82:"澳門",91:"國外"},powers: ["7","9","10","5","8","4","2","1","6","3","7","9","10","5","8","4","2"], parityBit: ["1","0","X","9","8","7","6","5","4","3","2"], genders: {male:"男",female:"女"}, checkAddressCode: function(addressCode){ var check = /^[1-9]\d{5}$/.test(addressCode); if(!check) return false; if(idCardNoUtil.provinceAndCitys[parseInt(addressCode.substring(0,2))]){ return true; }else{ return false; } }, checkBirthDayCode: function(birDayCode){ var check = /^[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))$/.test(birDayCode); if(!check) return false; var yyyy = parseInt(birDayCode.substring(0,4),10); var mm = parseInt(birDayCode.substring(4,6),10); var dd = parseInt(birDayCode.substring(6),10); var xdata = new Date(yyyy,mm-1,dd); if(xdata > new Date()){ return false;//生日不能大于當前日期 }else if ( ( xdata.getFullYear() == yyyy ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == dd ) ){ return true; }else{ return false; } }, getParityBit: function(idCardNo){ var id17 = idCardNo.substring(0,17); var power = 0; for(var i=0;i<17;i++){ power += parseInt(id17.charAt(i),10) * parseInt(idCardNoUtil.powers[i]); } var mod = power % 11; return idCardNoUtil.parityBit[mod]; }, checkParityBit: function(idCardNo){ var parityBit = idCardNo.charAt(17).toUpperCase(); if(idCardNoUtil.getParityBit(idCardNo) == parityBit){ return true; }else{ return false; } }, checkIdCardNo: function(idCardNo){ //15位和18位身份證號碼的基本校驗 var check = /^\d{15}|(\d{17}(\d|x|X))$/.test(idCardNo); if(!check) return false; //判斷長度為15位或18位 if(idCardNo.length==15){ return idCardNoUtil.check15IdCardNo(idCardNo); }else if(idCardNo.length==18){ return idCardNoUtil.check18IdCardNo(idCardNo); }else{ return false; } }, //校驗15位的身份證號碼 check15IdCardNo: function(idCardNo){ //15位身份證號碼的基本校驗 var check = /^[1-9]\d{7}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))\d{3}$/.test(idCardNo); if(!check) return false; //校驗地址碼 var addressCode = idCardNo.substring(0,6); check = idCardNoUtil.checkAddressCode(addressCode); if(!check) return false; var birDayCode = '19' + idCardNo.substring(6,12); //校驗日期碼 return idCardNoUtil.checkBirthDayCode(birDayCode); }, //校驗18位的身份證號碼 check18IdCardNo: function(idCardNo){ //18位身份證號碼的基本格式校驗 var check = /^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))\d{3}(\d|x|X)$/.test(idCardNo); if(!check) return false; //校驗地址碼 var addressCode = idCardNo.substring(0,6); check = idCardNoUtil.checkAddressCode(addressCode); if(!check) return false; //校驗日期碼 var birDayCode = idCardNo.substring(6,14); check = idCardNoUtil.checkBirthDayCode(birDayCode); if(!check) return false; //驗證校檢碼 return idCardNoUtil.checkParityBit(idCardNo); }, formateDateCN: function(day){ var yyyy =day.substring(0,4); var mm = day.substring(4,6); var dd = day.substring(6); return yyyy + '-' + mm +'-' + dd; }, //獲取信息 getIdCardInfo: function(idCardNo){ var idCardInfo = { gender:"", //性別 birthday:"" // 出生日期(yyyy-mm-dd) }; if(idCardNo.length==15){ var aday = '19' + idCardNo.substring(6,12); idCardInfo.birthday=idCardNoUtil.formateDateCN(aday); if(parseInt(idCardNo.charAt(14))%2==0){ idCardInfo.gender=idCardNoUtil.genders.female; }else{ idCardInfo.gender=idCardNoUtil.genders.male; } }else if(idCardNo.length==18){ var aday = idCardNo.substring(6,14); idCardInfo.birthday = idCardNoUtil.formateDateCN(aday); if(parseInt(idCardNo.charAt(16))%2==0){ idCardInfo.gender = idCardNoUtil.genders.female; }else{ idCardInfo.gender = idCardNoUtil.genders.male; } } return idCardInfo; }, getId15:function(idCardNo){ if(idCardNo.length==15){ return idCardNo; }else if(idCardNo.length==18){ return idCardNo.substring(0,6) + idCardNo.substring(8,17); }else{ return null; } }, getId18: function(idCardNo){ if(idCardNo.length==15){ var id17 = idCardNo.substring(0,6) + '19' + idCardNo.substring(6); var parityBit = idCardNoUtil.getParityBit(id17); return id17 + parityBit; }else if(idCardNo.length==18){ return idCardNo; }else{ return null; } }};
//驗證護照是否正確 function checknumber(number){ var str=number; //在JavaScript中，正則表達式只能使用"/"開頭和結束，不能使用雙引號 var Expression=/(P\d{7})|(G\d{8})/; var objExp=new RegExp(Expression);
if(objExp.test(str)==true){ return true; }else{ return false; }};
</pre>
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！