這篇文章主要介紹了jquery插件validation實現驗證身份證號、護照、電話號碼、email十分的簡單實用，有需要的小伙伴可以參考下。
先推薦一個基於bootstrap的jQuery validation插件：http://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/
jQuery validation添加驗證規則
validata.html
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 <!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>validata.js
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 $(function(){ $.validator.setDefaults({ submitHandler: function(form) { form.submit(); } }); // 字符驗證 jQuery.validator.addMethod("stringCheck", function(value, element) { return this.optional(element) || /^[u0391-uFFE5w]+$/.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");} }); })card.js
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 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=/(Pd{7})|(Gd{8})/; var objExp=new RegExp(Expression); if(objExp.test(str)==true){ return true; }else{ return false; } };以上所述就是本文的全部內容了，希望大家能夠喜歡。