首页 > 语言 > JavaScript > 正文

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

 

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <!-- TemplateBeginEditable name="doctitle" --> 
  6. <title>无标题文档</title> 
  7. <script src="lib/jquery.js" type="text/javascript"></script> 
  8. <script src="lib/jquery.validate.js" type="text/javascript"></script> 
  9. <script src="lib/card.js" type="text/javascript"></script> 
  10. <script src="lib/validata.js" type="text/javascript"></script> 
  11. <style type="text/css"> 
  12. em.success{ 
  13. background:url("images/tips_arrow.gif") no-repeat left 0px; 
  14. padding-left:16px; 
  15. margin-left:2px; 
  16. } 
  17. em.error{ 
  18. background:url("images/tips_arrow.gif") no-repeat left -51px; 
  19. display:inline; 
  20. padding-left:10px; 
  21. font-style:normal; 
  22. font-size:11px; 
  23. margin-left:2px; 
  24. font-family:12px/162% Arial, Helvetica, sans-serif; 
  25.  
  26. } 
  27. </style> 
  28.  
  29. </head> 
  30.  
  31. <body> 
  32. <form class="cmsform" id="commentForm" method="get" action=""> 
  33. <p> 
  34. <label for="cusername">姓名</label><em>*</em> 
  35. <input id="cusername" name="username" size="25" /> 
  36.  
  37. </p> 
  38. <p> 
  39. <label for="cemail">电子邮件</label><em>*</em> 
  40. <input id="cemail" name="email" size="25" /> 
  41.  
  42. </p> 
  43. <p> 
  44. <label for="card">身份证号</label><em>*</em> 
  45. <input id="card" name="card" size="25"/> 
  46.  
  47. </p> 
  48. <p> 
  49. <label for="passport">护照编号</label><em>*</em> 
  50. <input id="passport" name="passport" size="25"/> 
  51.  
  52. </p> 
  53. <p> 
  54. <label for="phone">电话号码</label><em>*</em> 
  55. <input id="phone" name="phone" size="25" /> 
  56.  
  57. </p> 
  58. </form> 
  59. </body> 
  60. </html> 

validata.js

 

 
  1. $(function(){ 
  2.  
  3. $.validator.setDefaults({ 
  4. submitHandler: function(form) { 
  5. form.submit(); 
  6. } 
  7. }); 
  8. // 字符验证 
  9. jQuery.validator.addMethod("stringCheck", function(value, element) { 
  10. return this.optional(element) || /^[/u0391-/uFFE5/w]+$/.test(value); 
  11. }, "只能包括中文字、英文字母、数字和下划线"); 
  12. // 中文字两个字节 
  13. jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { 
  14. var length = value.length; 
  15. for(var i = 0; i < value.length; i++){ 
  16. if(value.charCodeAt(i) > 127){ 
  17. length++; 
  18. } 
  19. } 
  20. return this.optional(element) || ( length >= param[0] && length <= param[1] ); 
  21. }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)"); 
  22.  
  23. // 身份证号码验证 
  24. jQuery.validator.addMethod("isIdCardNo", function(value, element) { 
  25. return this.optional(element) || idCardNoUtil.checkIdCardNo(value); 
  26. }, "请正确输入您的身份证号码"); 
  27. //护照编号验证 
  28. jQuery.validator.addMethod("passport", function(value, element) { 
  29. return this.optional(element) || checknumber(value); 
  30. }, "请正确输入您的护照编号"); 
  31.  
  32. // 手机号码验证 
  33. jQuery.validator.addMethod("isMobile", function(value, element) { 
  34. var length = value.length; 
  35. var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+/d{8})$/; 
  36. return this.optional(element) || (length == 11 && mobile.test(value)); 
  37. }, "请正确填写您的手机号码"); 
  38.  
  39. // 电话号码验证 
  40. jQuery.validator.addMethod("isTel", function(value, element) { 
  41. var tel = /^/d{3,4}-?/d{7,9}$/; //电话号码格式010-12345678 
  42. return this.optional(element) || (tel.test(value)); 
  43. }, "请正确填写您的电话号码"); 
  44.  
  45. // 联系电话(手机/电话皆可)验证 
  46. jQuery.validator.addMethod("isPhone", function(value,element) { 
  47. var length = value.length; 
  48. var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+/d{8})$/; 
  49. var tel = /^/d{3,4}-?/d{7,9}$/; 
  50. return this.optional(element) || (tel.test(value) || mobile.test(value)); 
  51.  
  52. }, "请正确填写您的联系电话"); 
  53.  
  54. // 邮政编码验证 
  55. jQuery.validator.addMethod("isZipCode", function(value, element) { 
  56. var tel = /^[0-9]{6}$/; 
  57. return this.optional(element) || (tel.test(value)); 
  58. }, "请正确填写您的邮政编码"); 
  59.  
  60. //开始验证 
  61. $('#commentForm').validate({ 
  62.  
  63. rules: { 
  64. username: { 
  65. required:true, 
  66. stringCheck:true, 
  67. byteRangeLength:[3,15] 
  68. }, 
  69. email:{ 
  70. required:true, 
  71. email:true 
  72. }, 
  73. phone:{ 
  74. required:true, 
  75. isMobile:true 
  76. }, 
  77. address:{ 
  78. required:true, 
  79. stringCheck:true, 
  80. byteRangeLength:[3,100] 
  81. }, 
  82. card:{ 
  83. required:true, 
  84. isIdCardNo:true 
  85.  
  86. }, 
  87. passport:{ 
  88. required:true, 
  89. passport:true 
  90.  
  91. } 
  92. }, 
  93.  
  94.  
  95. messages:{ 
  96. username: { 
  97. required: "请填写用户名", 
  98. stringCheck: "用户名只能包括中文字、英文字母、数字和下划线", 
  99. byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)" 
  100. }, 
  101. email:{ 
  102. required: "<font color=red>请输入一个Email地址</fond>", 
  103. email: "请输入一个有效的Email地址" 
  104. }, 
  105. phone:{ 
  106. required: "请输入您的联系电话", 
  107. isPhone: "请输入一个有效的联系电话" 
  108. }, 
  109. address:{ 
  110. required: "请输入您的联系地址", 
  111. stringCheck: "请正确输入您的联系地址", 
  112. byteRangeLength: "请详实您的联系地址以便于我们联系您" 
  113. }, 
  114. card:{ 
  115. required:"请输入身份证号", 
  116. isIdCardNo:"请输入正确的身份证号" 
  117. }, 
  118. passport:{ 
  119. required:"请输入护照编号", 
  120. passport:"请输入正确的护照编号" 
  121. } 
  122. }, 
  123.  
  124. focusInvalid: false, 
  125. onkeyup: false, 
  126. errorPlacement: function(error, element) { 
  127. error.appendTo( element.parent()); 
  128. }, 
  129. errorElement:"em", 
  130. error:function(label){label.text(" ").addClass("error");} 
  131. }); 
  132. }) 

card.js

 

 
  1. var idCardNoUtil = { 
  2.  
  3. provinceAndCitys: {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江", 
  4. 31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东", 
  5. 45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏", 
  6. 65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}, 
  7. powers: ["7","9","10","5","8","4","2","1","6","3","7","9","10","5","8","4","2"], 
  8. parityBit: ["1","0","X","9","8","7","6","5","4","3","2"], 
  9. genders: {male:"男",female:"女"}, 
  10. checkAddressCode: function(addressCode){ 
  11. var check = /^[1-9]/d{5}$/.test(addressCode); 
  12. if(!check) return false; 
  13. if(idCardNoUtil.provinceAndCitys[parseInt(addressCode.substring(0,2))]){ 
  14. return true; 
  15. }else{ 
  16. return false; 
  17. } 
  18. }, 
  19. checkBirthDayCode: function(birDayCode){ 
  20. var check = /^[1-9]/d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))$/.test(birDayCode); 
  21. if(!check) return false; 
  22. var yyyy = parseInt(birDayCode.substring(0,4),10); 
  23. var mm = parseInt(birDayCode.substring(4,6),10); 
  24. var dd = parseInt(birDayCode.substring(6),10); 
  25. var xdata = new Date(yyyy,mm-1,dd); 
  26. if(xdata > new Date()){ 
  27. return false;//生日不能大于当前日期 
  28. }else if ( ( xdata.getFullYear() == yyyy ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == dd ) ){ 
  29. return true; 
  30. }else{ 
  31. return false; 
  32. } 
  33. }, 
  34. getParityBit: function(idCardNo){ 
  35. var id17 = idCardNo.substring(0,17); 
  36.  
  37. var power = 0; 
  38. for(var i=0;i<17;i++){ 
  39. power += parseInt(id17.charAt(i),10) * parseInt(idCardNoUtil.powers[i]); 
  40. } 
  41.  
  42. var mod = power % 11; 
  43. return idCardNoUtil.parityBit[mod]; 
  44. }, 
  45. checkParityBit: function(idCardNo){ 
  46. var parityBit = idCardNo.charAt(17).toUpperCase(); 
  47. if(idCardNoUtil.getParityBit(idCardNo) == parityBit){ 
  48. return true; 
  49. }else{ 
  50. return false; 
  51. } 
  52. }, 
  53. checkIdCardNo: function(idCardNo){ 
  54. //15位和18位身份证号码的基本校验 
  55. var check = /^/d{15}|(/d{17}(/d|x|X))$/.test(idCardNo); 
  56. if(!check) return false; 
  57. //判断长度为15位或18位 
  58. if(idCardNo.length==15){ 
  59. return idCardNoUtil.check15IdCardNo(idCardNo); 
  60. }else if(idCardNo.length==18){ 
  61. return idCardNoUtil.check18IdCardNo(idCardNo); 
  62. }else{ 
  63. return false; 
  64. } 
  65. }, 
  66.  
  67. //校验15位的身份证号码 
  68. check15IdCardNo: function(idCardNo){ 
  69. //15位身份证号码的基本校验 
  70. 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); 
  71. if(!check) return false; 
  72. //校验地址码 
  73. var addressCode = idCardNo.substring(0,6); 
  74. check = idCardNoUtil.checkAddressCode(addressCode); 
  75. if(!check) return false; 
  76. var birDayCode = '19' + idCardNo.substring(6,12); 
  77. //校验日期码 
  78. return idCardNoUtil.checkBirthDayCode(birDayCode); 
  79. }, 
  80.  
  81. //校验18位的身份证号码 
  82. check18IdCardNo: function(idCardNo){ 
  83. //18位身份证号码的基本格式校验 
  84. 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); 
  85. if(!check) return false; 
  86. //校验地址码 
  87. var addressCode = idCardNo.substring(0,6); 
  88. check = idCardNoUtil.checkAddressCode(addressCode); 
  89. if(!check) return false; 
  90. //校验日期码 
  91. var birDayCode = idCardNo.substring(6,14); 
  92. check = idCardNoUtil.checkBirthDayCode(birDayCode); 
  93. if(!check) return false; 
  94. //验证校检码 
  95. return idCardNoUtil.checkParityBit(idCardNo); 
  96. }, 
  97.  
  98. formateDateCN: function(day){ 
  99. var yyyy =day.substring(0,4); 
  100. var mm = day.substring(4,6); 
  101. var dd = day.substring(6); 
  102. return yyyy + '-' + mm +'-' + dd; 
  103. }, 
  104.  
  105. //获取信息 
  106. getIdCardInfo: function(idCardNo){ 
  107. var idCardInfo = { 
  108. gender:"", //性别 
  109. birthday:"" // 出生日期(yyyy-mm-dd) 
  110. }; 
  111. if(idCardNo.length==15){ 
  112. var aday = '19' + idCardNo.substring(6,12); 
  113. idCardInfo.birthday=idCardNoUtil.formateDateCN(aday); 
  114. if(parseInt(idCardNo.charAt(14))%2==0){ 
  115. idCardInfo.gender=idCardNoUtil.genders.female; 
  116. }else{ 
  117. idCardInfo.gender=idCardNoUtil.genders.male; 
  118. } 
  119. }else if(idCardNo.length==18){ 
  120. var aday = idCardNo.substring(6,14); 
  121. idCardInfo.birthday=idCardNoUtil.formateDateCN(aday); 
  122. if(parseInt(idCardNo.charAt(16))%2==0){ 
  123. idCardInfo.gender=idCardNoUtil.genders.female; 
  124. }else{ 
  125. idCardInfo.gender=idCardNoUtil.genders.male; 
  126. } 
  127.  
  128. } 
  129. return idCardInfo; 
  130. }, 
  131. getId15:function(idCardNo){ 
  132. if(idCardNo.length==15){ 
  133. return idCardNo; 
  134. }else if(idCardNo.length==18){ 
  135. return idCardNo.substring(0,6) + idCardNo.substring(8,17); 
  136. }else{ 
  137. return null; 
  138. } 
  139. }, 
  140. getId18: function(idCardNo){ 
  141. if(idCardNo.length==15){ 
  142. var id17 = idCardNo.substring(0,6) + '19' + idCardNo.substring(6); 
  143. var parityBit = idCardNoUtil.getParityBit(id17); 
  144. return id17 + parityBit; 
  145. }else if(idCardNo.length==18){ 
  146. return idCardNo; 
  147. }else{ 
  148. return null; 
  149. } 
  150. } 
  151. }; 
  152. //验证护照是否正确 
  153. function checknumber(number){ 
  154. var str=number; 
  155. //在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号 
  156. var Expression=/(P/d{7})|(G/d{8})/; 
  157. var objExp=new RegExp(Expression); 
  158. if(objExp.test(str)==true){ 
  159. return true; 
  160. }else{ 
  161. return false; 
  162. } 
  163. }; 

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

上一篇：javascript实现删除前弹出确认框

下一篇：jQuery插件Slider Revolution实现响应动画滑动图片切换效果

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有