jquery validation验证身份证号、护照、电话号码、email
<!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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
$(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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
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);
validata.js
card.js
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验证身份证号、护照、电话号码、email的更多相关文章
- bootstrap-validator基本使用(自定义验证身份证号和手机号)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- JavaScript验证身份证号
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncodin ...
- javascript实现验证身份证号的有效性并提示
javascript实现验证身份证号的有效性并提示 function nunber(allowancePersonValue){ if(allowancePersonValue=="身份证号 ...
- js验证身份证号,超准确
js验证身份证号,超准确 看程序前先来了解下身份证号的构成:身份证号分为两种,旧的为15位,新的为18位.身份证15位编码规则:dddddd yymmdd xx p 其中 dddddd:地区码 ...
- js正则表达式验证身份证号和密码
//验证身份证号只能输入15位或者18位的身份证号 /^\d{14}[X|\d]{1}$|^\d{18}$/ig //验证只能输入字母和数字组合6到16位 /^[a-z][a-z0-9]{6,16}$ ...
- Android 使用正则表达式验证身份证号是否符合规则
我国当前的身份证号分为三种: 一.15位身份证号 二.18位身份证号(前17位位数字,最后一位为字母x) 三.18为身份证号(18位都是数字) 具体验证请参考下面代码: /** * 验证身份证号是否符 ...
- js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr)
js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...
- Jquery Validation 验证控件的使用说明
转载自:http://blog.csdn.net/huang100qi/article/details/52453970,做了一些简化及修改 下载地址:https://jqueryvalidation ...
- 锋利的js之验证身份证号
我们在做互联网网站时,注册个人资料时,经常要用到身份证号,我们需要对身份证进验证,不然别人随便输个号码就通过,让你感觉这个网站做得很shit. 身份证号是有规则的. 结构和形式 1.号码的结构 公民 ...
随机推荐
- Vuejs中slot实现自定义组件header、footer等
Vuejs中slot实现自定义组件header.footer等 vue中的slot主要负责内容分发,之前有介绍过slot的内容,具体链接:http://www.cnblogs.com/vipzhou/ ...
- 【转】关于JTA,XA,ACID
对于我们这种初学者,可能会使用spring带给我们的@Transactional,可能了解JTA,可能会使用jotm.atomikos,又会遇到一些名词XA,支持XA的数据库驱动等等诸多问题,然后就会 ...
- 【原】通过Spring-Session实现不同系统之间的单点登录
单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.目前市面上有很 ...
- GC详解及Minor GC和Full GC触发条件总结
GC,即就是Java垃圾回收机制.目前主流的JVM(HotSpot)采用的是分代收集算法.与C++不同的是,Java采用的是类似于树形结构的可达性分析法来判断对象是否还存在引用.即:从gcroot开始 ...
- Windows下Sqlplus中显示乱码
set NLS_LANG=SIMPLIFIED CHINESE_CHINA.ZHS16GBK 如果想显示英文 Set nls_lang=american_america.zhs16gbk 注意,前提是 ...
- HDU2612(KB1-N)
Find a way Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- 1px边框的渐变
<div class="box">banner</div> .box { width: 100px; height: 50px; line-height: ...
- 新项目找不到Angular-cli.json文件
新项目找不到Angular-cli.json文件 Angular-cli.json文件是Angular5中cli的相关配置信息. 今天创建了新Angular项目后突然发现Angular-cli.jso ...
- 在MyBatis中查询数据、涉及多参数的数据访问操作、插入数据时获取数据自增长的id、关联表查询操作、动态SQL、关于配置MyBatis映射没有代码提示的解决方案
1. 单元测试 在单元测试中,每个测试方法都需要执行相同的前置代码和后置代码,则可以自定义2个方法,分别在这2个方法中执行前置代码和后置代码,并为这2个方法添加@Before和@After注解,然后, ...
- web页面超时自动退出方法
思路: 使用 mousemover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出: 具体时间代码如下(js):var lastTime = new Da ...