jquery插件validation实现验证身份证号等
先推荐一个基于bootstrap的jQueryvalidation插件：http://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/
jQueryvalidation添加验证规则
validata.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<!--TemplateBeginEditablename="doctitle"-->
<title>无标题文档</title>
<scriptsrc="lib/jquery.js"type="text/javascript"></script>
<scriptsrc="lib/jquery.validate.js"type="text/javascript"></script>
<scriptsrc="lib/card.js"type="text/javascript"></script>
<scriptsrc="lib/validata.js"type="text/javascript"></script>
<styletype="text/css">
em.success{
background:url("images/tips_arrow.gif")no-repeatleft0px;
padding-left:16px;
margin-left:2px;
}
em.error{
background:url("images/tips_arrow.gif")no-repeatleft-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>
<formclass="cmsform"id="commentForm"method="get"action="">
<p>
<labelfor="cusername">姓名</label><em>*</em>
<inputid="cusername"name="username"size="25"/>
</p>
<p>
<labelfor="cemail">电子邮件</label><em>*</em>
<inputid="cemail"name="email"size="25"/>
</p>
<p>
<labelfor="card">身份证号</label><em>*</em>
<inputid="card"name="card"size="25"/>
</p>
<p>
<labelfor="passport">护照编号</label><em>*</em>
<inputid="passport"name="passport"size="25"/>
</p>
<p>
<labelfor="phone">电话号码</label><em>*</em>
<inputid="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){
returnthis.optional(element)||/^[\u0391-\uFFE5\w]+$/.test(value);
},"只能包括中文字、英文字母、数字和下划线");
//中文字两个字节
jQuery.validator.addMethod("byteRangeLength",function(value,element,param){
varlength=value.length;
for(vari=0;i<value.length;i++){
if(value.charCodeAt(i)>127){
length++;
}
}
returnthis.optional(element)||(length>=param[0]&&length<=param[1]);
},"请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
//身份证号码验证
jQuery.validator.addMethod("isIdCardNo",function(value,element){
returnthis.optional(element)||idCardNoUtil.checkIdCardNo(value);
},"请正确输入您的身份证号码");
//护照编号验证
jQuery.validator.addMethod("passport",function(value,element){
returnthis.optional(element)||checknumber(value);
},"请正确输入您的护照编号");
//手机号码验证
jQuery.validator.addMethod("isMobile",function(value,element){
varlength=value.length;
varmobile=/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
returnthis.optional(element)||(length==11&&mobile.test(value));
},"请正确填写您的手机号码");
//电话号码验证
jQuery.validator.addMethod("isTel",function(value,element){
vartel=/^\d{3,4}-?\d{7,9}$/;//电话号码格式010-12345678
returnthis.optional(element)||(tel.test(value));
},"请正确填写您的电话号码");
//联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone",function(value,element){
varlength=value.length;
varmobile=/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
vartel=/^\d{3,4}-?\d{7,9}$/;
returnthis.optional(element)||(tel.test(value)||mobile.test(value));
},"请正确填写您的联系电话");
//邮政编码验证
jQuery.validator.addMethod("isZipCode",function(value,element){
vartel=/^[0-9]{6}$/;
returnthis.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:"<fontcolor=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
varidCardNoUtil={
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){
varcheck=/^[1-9]\d{5}$/.test(addressCode);
if(!check)returnfalse;
if(idCardNoUtil.provinceAndCitys[parseInt(addressCode.substring(0,2))]){
returntrue;
}else{
returnfalse;
}
},
checkBirthDayCode:function(birDayCode){
varcheck=/^[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))$/.test(birDayCode);
if(!check)returnfalse;
varyyyy=parseInt(birDayCode.substring(0,4),10);
varmm=parseInt(birDayCode.substring(4,6),10);
vardd=parseInt(birDayCode.substring(6),10);
varxdata=newDate(yyyy,mm-1,dd);
if(xdata>newDate()){
returnfalse;//生日不能大于当前日期
}elseif((xdata.getFullYear()==yyyy)&&(xdata.getMonth()==mm-1)&&(xdata.getDate()==dd)){
returntrue;
}else{
returnfalse;
}
},
getParityBit:function(idCardNo){
varid17=idCardNo.substring(0,17);
varpower=0;
for(vari=0;i<17;i++){
power+=parseInt(id17.charAt(i),10)*parseInt(idCardNoUtil.powers[i]);
}
varmod=power%11;
returnidCardNoUtil.parityBit[mod];
},
checkParityBit:function(idCardNo){
varparityBit=idCardNo.charAt(17).toUpperCase();
if(idCardNoUtil.getParityBit(idCardNo)==parityBit){
returntrue;
}else{
returnfalse;
}
},
checkIdCardNo:function(idCardNo){
//15位和18位身份证号码的基本校验
varcheck=/^\d{15}|(\d{17}(\d|x|X))$/.test(idCardNo);
if(!check)returnfalse;
//判断长度为15位或18位
if(idCardNo.length==15){
returnidCardNoUtil.check15IdCardNo(idCardNo);
}elseif(idCardNo.length==18){
returnidCardNoUtil.check18IdCardNo(idCardNo);
}else{
returnfalse;
}
},
//校验15位的身份证号码
check15IdCardNo:function(idCardNo){
//15位身份证号码的基本校验
varcheck=/^[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)returnfalse;
//校验地址码
varaddressCode=idCardNo.substring(0,6);
check=idCardNoUtil.checkAddressCode(addressCode);
if(!check)returnfalse;
varbirDayCode='19'+idCardNo.substring(6,12);
//校验日期码
returnidCardNoUtil.checkBirthDayCode(birDayCode);
},
//校验18位的身份证号码
check18IdCardNo:function(idCardNo){
//18位身份证号码的基本格式校验
varcheck=/^[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)returnfalse;
//校验地址码
varaddressCode=idCardNo.substring(0,6);
check=idCardNoUtil.checkAddressCode(addressCode);
if(!check)returnfalse;
//校验日期码
varbirDayCode=idCardNo.substring(6,14);
check=idCardNoUtil.checkBirthDayCode(birDayCode);
if(!check)returnfalse;
//验证校检码
returnidCardNoUtil.checkParityBit(idCardNo);
},
formateDateCN:function(day){
varyyyy=day.substring(0,4);
varmm=day.substring(4,6);
vardd=day.substring(6);
returnyyyy+'-'+mm+'-'+dd;
},
//获取信息
getIdCardInfo:function(idCardNo){
varidCardInfo={
gender:"",//性别
birthday:""//出生日期(yyyy-mm-dd)
};
if(idCardNo.length==15){
varaday='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;
}
}elseif(idCardNo.length==18){
varaday=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;
}
}
returnidCardInfo;
},
getId15:function(idCardNo){
if(idCardNo.length==15){
returnidCardNo;
}elseif(idCardNo.length==18){
returnidCardNo.substring(0,6)+idCardNo.substring(8,17);
}else{
returnnull;
}
},
getId18:function(idCardNo){
if(idCardNo.length==15){
varid17=idCardNo.substring(0,6)+'19'+idCardNo.substring(6);
varparityBit=idCardNoUtil.getParityBit(id17);
returnid17+parityBit;
}elseif(idCardNo.length==18){
returnidCardNo;
}else{
returnnull;
}
}
};
//验证护照是否正确
functionchecknumber(number){
varstr=number;
//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
varExpression=/(P\d{7})|(G\d{8})/;
varobjExp=newRegExp(Expression);
if(objExp.test(str)==true){
returntrue;
}else{
returnfalse;
}
};
以上所述就是本文的全部内容了，希望大家能够喜欢。