jquery插件validation實現驗證身份證號等

2024-05-06 16:21:23

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jquery插件validation實現驗證身份證號、護照、電話號碼、email十分的簡單實用，有需要的小伙伴可以參考下。

先推薦一個基于bootstrap的jQuery validation插件：http://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/

jQuery validation添加驗證規則

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" />



<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

$(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");}

});

})

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;

}

};