jquery插件validation實(shí)現(xiàn)驗(yàn)證身份證號(hào)等
更新時(shí)間：2015年06月04日 17:35:04 投稿：hebedich
這篇文章主要介紹了jquery插件validation實(shí)現(xiàn)驗(yàn)證身份證號(hào)、護(hù)照、電話號(hào)碼、email十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
先推薦一個(gè)基于bootstrap的jQuery validation插件：http://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/
jQuery validation添加驗(yàn)證規(guī)則
validata.html
<!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>無(wú)標(biāo)題文檔</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">身份證號(hào)</label><em>*</em>
<input id="card" name="card" size="25"/>
</p>
<p>
<label for="passport">護(hù)照編號(hào)</label><em>*</em>
<input id="passport" name="passport" size="25"/>
</p>
<p>
<label for="phone">電話號(hào)碼</label><em>*</em>
<input id="phone" name="phone" size="25" />
</p>
</form>
</body>
</html>
validata.js
$(function(){
$.validator.setDefaults({
submitHandler: function(form) {
form.submit();
}
});
// 字符驗(yàn)證
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、數(shù)字和下劃線");
// 中文字兩個(gè)字節(jié)
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] );
}, "請(qǐng)確保輸入的值在3-15個(gè)字節(jié)之間(一個(gè)中文字算2個(gè)字節(jié))");
// 身份證號(hào)碼驗(yàn)證
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || idCardNoUtil.checkIdCardNo(value);
}, "請(qǐng)正確輸入您的身份證號(hào)碼");
//護(hù)照編號(hào)驗(yàn)證
jQuery.validator.addMethod("passport", function(value, element) {
return this.optional(element) || checknumber(value);
}, "請(qǐng)正確輸入您的護(hù)照編號(hào)");
// 手機(jī)號(hào)碼驗(yàn)證
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));
}, "請(qǐng)正確填寫(xiě)您的手機(jī)號(hào)碼");
// 電話號(hào)碼驗(yàn)證
jQuery.validator.addMethod("isTel", function(value, element) {
var tel = /^\d{3,4}-?\d{7,9}$/; //電話號(hào)碼格式010-12345678
return this.optional(element) || (tel.test(value));
}, "請(qǐng)正確填寫(xiě)您的電話號(hào)碼");
// 聯(lián)系電話(手機(jī)/電話皆可)驗(yàn)證
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));
}, "請(qǐng)正確填寫(xiě)您的聯(lián)系電話");
// 郵政編碼驗(yàn)證
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "請(qǐng)正確填寫(xiě)您的郵政編碼");
//開(kāi)始驗(yàn)證
$('#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: "請(qǐng)?zhí)顚?xiě)用戶名",
stringCheck: "用戶名只能包括中文字、英文字母、數(shù)字和下劃線",
byteRangeLength: "用戶名必須在3-15個(gè)字符之間(一個(gè)中文字算2個(gè)字符)"
},
email:{
required: "<font color=red>請(qǐng)輸入一個(gè)Email地址</fond>",
email: "請(qǐng)輸入一個(gè)有效的Email地址"
},
phone:{
required: "請(qǐng)輸入您的聯(lián)系電話",
isPhone: "請(qǐng)輸入一個(gè)有效的聯(lián)系電話"
},
address:{
required: "請(qǐng)輸入您的聯(lián)系地址",
stringCheck: "請(qǐng)正確輸入您的聯(lián)系地址",
byteRangeLength: "請(qǐng)?jiān)攲?shí)您的聯(lián)系地址以便于我們聯(lián)系您"
},
card:{
required:"請(qǐng)輸入身份證號(hào)",
isIdCardNo:"請(qǐng)輸入正確的身份證號(hào)"
},
passport:{
required:"請(qǐng)輸入護(hù)照編號(hào)",
passport:"請(qǐng)輸入正確的護(hù)照編號(hào)"
}
},
focusInvalid: false,
onkeyup: false,
errorPlacement: function(error, element) {
error.appendTo( element.parent());
},
errorElement:"em",
error:function(label){label.text(" ").addClass("error");}
});
})
card.js
var idCardNoUtil = {
provinceAndCitys: {11:"北京",12:"天津",13:"河北",14:"山西",15:"內(nèi)蒙古",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:"臺(tái)灣",81:"香港",82:"澳門(mén)",91:"國(guó)外"},
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;//生日不能大于當(dāng)前日期
}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位身份證號(hào)碼的基本校驗(yàn)
var check = /^\d{15}|(\d{17}(\d|x|X))$/.test(idCardNo);
if(!check) return false;
//判斷長(zhǎng)度為15位或18位
if(idCardNo.length==15){
return idCardNoUtil.check15IdCardNo(idCardNo);
}else if(idCardNo.length==18){
return idCardNoUtil.check18IdCardNo(idCardNo);
}else{
return false;
}
},
//校驗(yàn)15位的身份證號(hào)碼
check15IdCardNo: function(idCardNo){
//15位身份證號(hào)碼的基本校驗(yàn)
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;
//校驗(yàn)地址碼
var addressCode = idCardNo.substring(0,6);
check = idCardNoUtil.checkAddressCode(addressCode);
if(!check) return false;
var birDayCode = '19' + idCardNo.substring(6,12);
//校驗(yàn)日期碼
return idCardNoUtil.checkBirthDayCode(birDayCode);
},
//校驗(yàn)18位的身份證號(hào)碼
check18IdCardNo: function(idCardNo){
//18位身份證號(hào)碼的基本格式校驗(yàn)
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;
//校驗(yàn)地址碼
var addressCode = idCardNo.substring(0,6);
check = idCardNoUtil.checkAddressCode(addressCode);
if(!check) return false;
//校驗(yàn)日期碼
var birDayCode = idCardNo.substring(6,14);
check = idCardNoUtil.checkBirthDayCode(birDayCode);
if(!check) return false;
//驗(yàn)證校檢碼
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;
}
}
};
//驗(yàn)證護(hù)照是否正確
function checknumber(number){
var str=number;
//在JavaScript中，正則表達(dá)式只能使用"/"開(kāi)頭和結(jié)束，不能使用雙引號(hào)
var Expression=/(P\d{7})|(G\d{8})/;
var objExp=new RegExp(Expression);
if(objExp.test(str)==true){
return true;
}else{
return false;
}
};
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- jquery正則表達(dá)式驗(yàn)證（手機(jī)號(hào)、身份證號(hào)、中文名稱）
- jquery validation驗(yàn)證身份證號(hào),護(hù)照,電話號(hào)碼,email(實(shí)例代碼)
- jQuery如何用正則表達(dá)式驗(yàn)證手機(jī)號(hào)、身份證號(hào)、中文名稱
- jQuery實(shí)現(xiàn)從身份證號(hào)中獲取出生日期和性別的方法分析
- jquery 校驗(yàn)中國(guó)身份證號(hào)碼實(shí)例詳解
- jQuery驗(yàn)證手機(jī)號(hào)郵箱身份證的正則表達(dá)式（含港澳臺(tái)）
- jquery表單驗(yàn)證框架提供的身份證驗(yàn)證方法(示例代碼)
- jQuery使用正則驗(yàn)證15/18身份證的方法示例
- jQuery實(shí)現(xiàn)根據(jù)身份證號(hào)獲取生日、年齡、性別等信息的方法
相關(guān)文章
jQuery實(shí)現(xiàn)的倒計(jì)時(shí)效果實(shí)例小結(jié)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的倒計(jì)時(shí)效果,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)日期與時(shí)間的運(yùn)算實(shí)現(xiàn)倒計(jì)時(shí)功能的相關(guān)技巧,需要的朋友可以參考下2016-04-04
今天是CSS的選擇器，以后還有一部分xPath的選擇器。今天的筆記中包括44個(gè)選擇器，基本涵蓋了CSS 2和CSS 3的所有規(guī)定。2010-03-03
詳解jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的ui-grid網(wǎng)格布局使用
這篇文章主要介紹了jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的ui-grid網(wǎng)格布局使用,以講解多列頁(yè)面布局方式為主,需要的朋友可以參考下2015-12-12
jQuery實(shí)現(xiàn)表格的增、刪、改操作示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格的增、刪、改操作,涉及基于jQuery的事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
jQuery插件zTree實(shí)現(xiàn)更新根節(jié)點(diǎn)中第i個(gè)節(jié)點(diǎn)名稱的方法示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)更新根節(jié)點(diǎn)中第i個(gè)節(jié)點(diǎn)名稱的方法,結(jié)合實(shí)例形式分析了樹(shù)形插件zTree針對(duì)節(jié)點(diǎn)的更新操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
jQuery的each循環(huán)用法簡(jiǎn)單示例
這篇文章主要介紹了jQuery的each循環(huán)用法,以簡(jiǎn)單實(shí)例形式分析了jQuery中each循環(huán)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
jQuery實(shí)現(xiàn)通過(guò)方向鍵控制div塊上下左右移動(dòng)的方法【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)通過(guò)方向鍵控制div塊上下左右移動(dòng)的方法,涉及jQuery結(jié)合鍵盤(pán)事件響應(yīng)動(dòng)態(tài)修改頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
JQuery選中checkbox方法代碼實(shí)例（全選、反選、全不選）
這篇文章主要介紹了JQuery選中checkbox方法代碼實(shí)例（全選、反選、全不選）,本文直接給出代碼實(shí)例,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery綁定事件的幾種實(shí)現(xiàn)方式，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了jQuery+ajax讀取并解析XML文件的方法,涉及jQuery的ajax方法調(diào)用xml文件及針對(duì)xml數(shù)據(jù)的遍歷與節(jié)點(diǎn)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09