首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 04, 2015

先推荐一个基于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;
}
};

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

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
js微信分享API
Oct 11 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 #Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 #Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 #Javascript
深入理解JavaScript中的对象
Jun 04 #Javascript
详解JavaScript中void语句的使用
Jun 04 #Javascript
用JavaScript实现对话框的教程
Jun 04 #Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 #Javascript
保加利亚购物网站(3) 马耳他购物网站(1) 约旦购物网站(1) 冰岛购物网站(1) 罗马尼亚购物网站(10) 哈萨克斯坦购物网站(2) 亚洲购物网站(6) 希腊购物网站(6) 白俄罗斯购物网站(3) 乌克兰购物网站(27)
You might like
「OVERLORD」动画重要删减！雅儿贝德的背叛？至尊猎杀队结成
2020/04/09 日漫
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
js实现字符串转日期格式的方法
2015/05/20 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
详解pandas DataFrame的查询方法（loc,iloc,at,iat,ix的用法和区别）
2019/08/02 Python
python字符串格式化方式解析
2019/10/19 Python
python实现按首字母分类查找功能
2019/10/31 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
Marlies Dekkers内衣法国官方网上商店：国际知名的荷兰内衣品牌
2019/03/18 全球购物
美国精油公司：Plant Therapy
2019/05/17 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
深圳茁壮笔试题
2015/05/28 面试题
大学生秋游活动方案
2014/02/17 职场文书
综合实践活动总结
2014/05/05 职场文书
求职信格式范文
2015/03/19 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python