jquery插件validation实现验证身份证号等

先推荐一个基于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" />
<!-- 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

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

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • jQuery验证手机号邮箱身份证的正则表达式（含港澳台）

    自己对正则验证也没系统用过,这次自己做个demo,一下子把这些全都用上了,下次有需要直接来拿了. 以下代码是在页面使用JQuery进行验证的,也有在后台进行验证的,可以试试,都一样的原理. 直接上代码:注意:(有些验证规则当然不仅仅是本文的,也许还有其他更好的,可以留言交流) 手机号:(移动-电信-联通) var tel = $("#PhoneNumber").val();//获取输入的手机号 var yidongreg = /^(134[012345678]\d{7}|1[34578

  • jQuery如何用正则表达式验证手机号、身份证号、中文名称

    数字判断方法:isNaN()函数 test()方法 判断字符串中是否匹配到正则表达式内容,返回的是boolean值 ( true / false ) // 验证中文名称 function isChinaName(name) { var pattern = /^[\u4E00-\u9FA5]{1,6}$/; return pattern.test(name); } // 验证手机号 function isPhoneNo(phone) { var pattern = /^1[34578]\d{9}$

  • jquery 校验中国身份证号码实例详解

    jquery 校验中国身份证号码实例详解 大陆18位身份证(第二代身份证) 身份号码是一组具有特征组合码,由十七位数字本体码和一位校验码组成. 排列顺序从左至右依次为:六位数字地区码,八位数字生日码,三位数字顺序码和一位数字校验码. 校验方法: (1)先对前17位数字的权求和 S = Sum(Ci * Vi), i = 0, ... , 16 Ci:表示身份证号码上第i位置的数字值 Vi:表示第i位置上的"加权因子" 加权因子Vi: 7 9 10 5 8 4 2 1 6 3 7 9 1

  • jquery validation验证身份证号,护照,电话号码,email(实例代码)

    validata.htm 复制代码 代码如下: <!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

  • jquery表单验证框架提供的身份证验证方法(示例代码)

    如下所示: 复制代码 代码如下: var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",  21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",  34:"安徽",35:&q

  • jquery正则表达式验证（手机号、身份证号、中文名称）

    本文实例需要验证的内容:中文姓名.手机号.身份证和地址,验证方法分享给大家供大家参考,具体内容如下 HTML(表单): <form action=""> <div class="form-group"> <label>姓名:</label> <input id="name" type="text"> </div> <div class="f

  • jQuery实现从身份证号中获取出生日期和性别的方法分析

    本文实例分析了jQuery实现从身份证号中获取出生日期和性别的方法.分享给大家供大家参考,具体如下: 一.前言: 今天,在做移动端的项目中,按照设计稿的要求,是可以让用户自己输入出生日期的,我还很认真的用了刚刚知道的html5表单的日期类型,本想着终于不用日期插件就可以实现用户选择自己的出生日期了,可结果老大说,把这个表单去掉,要做成从身份证号里边读取用户的出生日期.好吧,高兴了一半,结果....唉,没办法,只能按照领导的要求来做啊,于是就有了下边的从身份证号中获取出生日期和性别的代码. 二.实

  • jquery插件validation实现验证身份证号等

    先推荐一个基于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/D

  • jQuery插件Validation快速完成表单验证的方式

    jQuery插件Validation快速完成表单验证的方式

    JQuery的Validation插件可以到http://plugins.jquery.com/上去下载.今天来分享一下,关于这个插件的使用. 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照validation定义好的规则就可以了.  •首先引入JQuery库和Validation插件:  <script type="text/javascript" src="jquery-2.2.4.min.js"></script> <s

  • jQuery插件Validation表单验证详解

    jQuery插件Validation表单验证详解

    本文为大家分享了jQuery插件Validation表单验证的具体实现代码,供大家参考,具体内容如下 功能 1.对"姓名"的必填和长度至少是两位的验证. 2.对"电子邮件"的必填和是否为E-mail格式的验证. 3.对"网址"是否为url的验证. 4.对"你的评论"是否必填验证. 结果图 例子 <html> <head> <meta http-equiv="Content-Type&qu

  • Javascript使用正则验证身份证号(简单)

    身份证为15位或者18位,15位的全为数字,18位的前17位为数字,最后一位为数字或者大写字母"X". 与之匹配的正则表达式: (^\d{15}$)|(^\d{17}([0-9]|X)$) 下面以Javascript为例进行说明: functionisIdCardNo(num) { num = num.toUpperCase(); //身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X. if ( !(/(^\d{15}$)|(^

  • javascript实现验证身份证号的有效性并提示

    javascript实现验证身份证号的有效性并提示 function nunber(allowancePersonValue){ if(allowancePersonValue=="身份证号"){ $("#span_username").show(); $("#span_username").html("身份证号不能为空"); return false; } //校验长度,类型 else if(isCardNo(allowan

  • 超精准的javascript验证身份证号的具体实现方法

    编写程序前先来了解下身份证号的构成: 身份证号分为两种,旧的为15位,新的为18位. 身份证15位编码规则:dddddd yymmdd xx p    其中 dddddd:地区码    yymmdd: 出生年月日    xx: 顺序类编码,无法确定    p: 性别,奇数为男,偶数为女: 身份证18位编码规则:dddddd yyyymmdd xxx y    其中 dddddd:地区码    yyyymmdd: 出生年月日     xxx:顺序类编码,无法确定,奇数为男,偶数为女    y: 校

  • Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息

    上个星期,大佬分享了一个验证身份证号合法性的库:id_validator,没空去试着用一下看看,今天有点时间,来试着用下这个库. 1.首先,要安装这个库,windows+R键运行cmd,打开命令行窗口,输入下面的命令: pip install id_validator 2.安装成功后,开始来使用这个库 (1).首先,输入命令 python: (2).接着,引用这个库底下的一个模块,输入命令 from id_validator import validator (3).依次输入下面的命令,来看下校

  • 超精准的javascript验证身份证号的方法

    编写程序前先来了解下身份证号的构成: 身份证号分为两种,旧的为15位,新的为18位. 身份证15位编码规则:dddddd yymmdd xx p 其中 dddddd:地区码    yymmdd: 出生年月日    xx: 顺序类编码,无法确定    p: 性别,奇数为男,偶数为女: 身份证18位编码规则:dddddd yyyymmdd xxx y 其中 dddddd:地区码    yyyymmdd: 出生年月日     xxx:顺序类编码,无法确定,奇数为男,偶数为女    y: 校验码,该位数

  • jQuery Password Validation密码验证

    jQuery Password Validation(密码验证)插件扩展了 jQuery Validate 插件,提供了两种组件: 一种评价密码的相关因素的功能:比如大小写字母的混合情况.字符(数字.特殊字符)的混合情况.长度.与用户名的相似度(可选的). 一种使用评价功能显示密码强度的验证插件自定义方法.显示的文本可以被本地化. 您可以简单地自定义强度显示的外观.本地化消息显示,并集成到已有的表单中. 该插件目前版本是 1.0.0. 使用方式 如需使用 Password Validation(

随机推荐