HTML5 Input 验证身份证

HTML5 Input 验证身份证

  1. 背景介绍
    在许多网站或应用程序中,我们常常需要验证用户输入的身份证号码的有效性。HTML5为我们提供了一种简单而有效的方法来验证身份证号码的格式。本文将介绍如何使用HTML5的input元素来验证身份证号码,并提供相应的代码示例。

  2. HTML5的input元素
    HTML5的input元素有多种类型可供选择,其中包括"number"、“email”、"date"等等。对于验证身份证号码,我们可以使用"type"属性为"text"的input元素,并通过"pattern"属性来指定验证的正则表达式。

  3. 身份证号码的正则表达式
    身份证号码的格式包括18位和15位两种。18位身份证号码的正则表达式如下所示:

1. 其中,“\d"表示数字,”{17}“表示前面的数字出现17次,”[\dXx]"表示最后一位可以是数字、大写字母X或小写字母x。

15位身份证号码的正则表达式如下所示:

1. 4. 完整示例代码 下面是一个完整的示例代码,演示如何创建一个带有身份证号码验证的输入框: 身份证号码验证 提交 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 在上述示例代码中,我们通过CSS的样式来为无效的输入框添加红色边框。当用户输入的身份证号码不满足正则表达式的要求时,输入框将显示为红色边框。
  1. 序列图
    下面是一个使用mermaid语法绘制的序列图,展示了用户输入身份证号码并进行验证的过程:

Application
User
Application
User
使用HTML5 input验证
输入身份证号码
验证身份证号码
提交表单
处理表单数据
6. 总结
通过使用HTML5的input元素和正则表达式,我们可以方便地验证用户输入的身份证号码的有效性。在本文中,我们介绍了身份证号码的正则表达式,并提供了相应的代码示例。希望本文对您理解HTML5输入验证身份证的方法有所帮助!

html+JavaScript架构 可以用在.asp .php .jsp的用户注册页面中 功能如下: 1.可以验证用户密码的安全级别并返回安全级别的等级 全部数字安全级别为低 数字+字母安全级别为中 数字+大小写字母安全级别为最高 并且密码不能为全角 或者特殊符号等 如果修改功能请修改 js下的passwordstrength.js 2.姓名验证 验证中国人的姓名 3.身份证验证根据用户提供的身份证信判断出省市,然后在判断....做到只能输入 正确的省份证信息才可以.... 判断身份证的方法比使用正则表达式更加准确详细请看 js中的 checkidcard.js 判断省份证的 js function checkIsChinese(str){ if (str.length < 2 || str.length > 15){ return "姓名长度不正确"; } var ret=true; for(var i=0;i<str.length;i++){ ret=ret && (str.charCodeAt(i)>=10000); } if (ret){ return "true"; } else{ return "请输入中文"; } } //www.jsphelp.com function parseIdCard(val) { var birthdayValue; var sexId; var sexText; if (15 == val.length) //15位身份证号码 { birthdayValue = val.charAt(6) + val.charAt(7); if (parseInt(birthdayValue) < 10) { birthdayValue = '20' + birthdayValue; } else { birthdayValue = '19' + birthdayValue; } birthdayValue = birthdayValue + '-' + val.charAt(8) + val.charAt(9) + '-' + val.charAt(10) + val.charAt(11); if (parseInt(val.charAt(14) / 2) * 2 != val.charAt(14)) { sexId = "1"; sexText = "男"; } else { sexId = "2"; sexText = "女"; } } if (18 == val.length) { //18位身份证号码 birthdayValue = val.charAt(6) + val.charAt(7) + val.charAt(8) + val.charAt(9) + '-' + val.charAt(10) + val.charAt(11) + '-' + val.charAt(12) + val.charAt(13); if (parseInt(val.charAt(16) / 2) * 2 != val.charAt(16)) { sexId = "1"; sexText = "男"; } else { sexId = "2"; sexText = "女"; } } //年龄 var dt1 = new Date(birthdayValue.replace("-", "/")); var dt2 = new Date(); var age = dt2.getFullYear() - dt1.getFullYear(); var m = dt2.getMonth() - dt1.getMonth(); if (m < 0) age--; return new Array(birthdayValue, sexId, sexText, age); } function checkIdcard(idcard){ idcard = idcard.toUpperCase(); var Errors=new Array("true","身份证号码位数不对!","身份证号码出生日期超出范围或含有非法字符!","身份证号码校验错误!","身份证号码中地区编码不正确!"); var area={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:"国外"} var idcard,Y,JYM; var S,M; var idcard_array = new Array(); idcard_array = idcard.split(""); if(idcard.length != 15 && idcard.length != 18) return Errors[1]; //if(idcard.length != 18) return Errors[1]; if (idcard.substr(0,6) == "000000" || idcard.substr(0,6) == "111111" || idcard.substr(0,6) == "222222" || idcard.substr(0,6) == "333333" || idcard.substr(0,6) == "444444" || idcard.substr(0,6) == "555555" || idcard.substr(0,6) == "666666" || idcard.substr(0,6) == "777777" || idcard.substr(0,6) == "888888" || idcard.substr(0,6) == "999999") return Errors[4]; if (idcard.substr(0,6) == "123456" || idcard.substr(0,6) == "234567" || idcard.substr(0,6) == "345678" || idcard.substr(0,6) == "456789" || idcard.substr(0,6) == "567890" || idcard.substr(0,6) == "012345" || idcard.substr(0,6) == "543210" || idcard.substr(0,6) == "432109" || idcard.substr(0,6) == "321098" || idcard.substr(0,6) == "210987" || idcard.substr(0,6) == "109876" || idcard.substr(0,6) == "098765" || idcard.substr(0,6) == "987654" || idcard.substr(0,6) == "876543" || idcard.substr(0,6) == "765432") return Errors[4]; if (idcard.substr(0,6) == "121212" || idcard.substr(0,6) == "131313" || idcard.substr(0,6) == "141414" || idcard.substr(0,6) == "151515" || idcard.substr(0,6) == "161616" || idcard.substr(0,6) == "171717" || idcard.substr(0,6) == "181818" || idcard.substr(0,6) == "191919" || idcard.substr(0,6) == "101010") return Errors[4]; if (idcard.substr(0,6) == "212121" || idcard.substr(0,6) == "232323" || idcard.substr(0,6) == "242424" || idcard.substr(0,6) == "252525" || idcard.substr(0,6) == "262626" || idcard.substr(0,6) == "272727" || idcard.substr(0,6) == "282828" || idcard.substr(0,6) == "292929" || idcard.substr(0,6) == "202020") return Errors[4]; if (idcard.substr(0,6) == "313131" || idcard.substr(0,6) == "323232" || idcard.substr(0,6) == "343434" || idcard.substr(0,6) == "353535" || idcard.substr(0,6) == "363636" || idcard.substr(0,6) == "373737" || idcard.substr(0,6) == "383838" || idcard.substr(0,6) == "393939" || idcard.substr(0,6) == "303030") return Errors[4]; if (idcard.substr(0,6) == "414141" || idcard.substr(0,6) == "424242" || idcard.substr(0,6) == "434343" || idcard.substr(0,6) == "454545" || idcard.substr(0,6) == "464646" || idcard.substr(0,6) == "474747" || idcard.substr(0,6) == "484848" || idcard.substr(0,6) == "494949" || idcard.substr(0,6) == "404040") return Errors[4]; if (idcard.substr(0,6) == "515151" || idcard.substr(0,6) == "525252" || idcard.substr(0,6) == "535353" || idcard.substr(0,6) == "545454" || idcard.substr(0,6) == "565656" || idcard.substr(0,6) == "575757" || idcard.substr(0,6) == "585858" || idcard.substr(0,6) == "595959" || idcard.substr(0,6) == "505050") return Errors[4]; if (idcard.substr(0,6) == "616161" || idcard.substr(0,6) == "626262" || idcard.substr(0,6) == "636363" || idcard.substr(0,6) == "646464" || idcard.substr(0,6) == "656565" || idcard.substr(0,6) == "676767" || idcard.substr(0,6) == "686868" || idcard.substr(0,6) == "696969" || idcard.substr(0,6) == "606060") return Errors[4]; if (idcard.substr(0,6) == "717171" || idcard.substr(0,6) == "727272" || idcard.substr(0,6) == "737373" || idcard.substr(0,6) == "747474" || idcard.substr(0,6) == "757575" || idcard.substr(0,6) == "767676" || idcard.substr(0,6) == "787878" || idcard.substr(0,6) == "797979" || idcard.substr(0,6) == "707070") return Errors[4]; if (idcard.substr(0,6) == "818181" || idcard.substr(0,6) == "828282" || idcard.substr(0,6) == "838383" || idcard.substr(0,6) == "848484" || idcard.substr(0,6) == "858585" || idcard.substr(0,6) == "868686" || idcard.substr(0,6) == "878787" || idcard.substr(0,6) == "898989" || idcard.substr(0,6) == "808080") return Errors[4]; if (idcard.substr(0,6) == "919191" || idcard.substr(0,6) == "929292" || idcard.substr(0,6) == "939393" || idcard.substr(0,6) == "949494" || idcard.substr(0,6) == "959595" || idcard.substr(0,6) == "969696" || idcard.substr(0,6) == "979797" || idcard.substr(0,6) == "989898" || idcard.substr(0,6) == "909090") return Errors[4]; if(area[parseInt(idcard.substr(0,2))]==null) return Errors[4]; switch(idcard.length){ case 15: if ((parseInt(idcard.substr(6,2))+1900) % 4 == 0 || ((parseInt(idcard.substr(6,2))+1900) % 100 == 0 && (parseInt(idcard.substr(6,2))+1900) % 4 == 0 )){ ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;//测试出生日期的合法性 } else{ ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;//测试出生日期的合法性 } if(ereg.test(idcard)) return Errors[0]; else return Errors[2]; break; case 18: if ( parseInt(idcard.substr(6,4)) % 4 == 0 || (parseInt(idcard.substr(6,4)) % 100 == 0 && parseInt(idcard.substr(6,4))%4 == 0 )){ ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;//闰年出生日期的合法性正则表达式 } else{ ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;//平年出生日期的合法性正则表达式 } if(ereg.test(idcard)){ S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 + (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 + (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 + (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 + (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 + (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 + (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 + parseInt(idcard_array[7]) * 1 + parseInt(idcard_array[8]) * 6 + parseInt(idcard_array[9]) * 3 ; Y = S % 11; M = "F"; JYM = "10X98765432"; M = JYM.substr(Y,1); if(M == idcard_array[17]) return Errors[0]; else return Errors[3]; } else return Errors[2]; break; default: return Errors[1]; break; } } function checkTwID(id){ //建立字母分数数组(A~Z) var city = new Array( 1,10,19,28,37,46,55,64,39,73,82, 2,11, 20,48,29,38,47,56,65,74,83,21, 3,12,30 ) id = id.toUpperCase(); // 使用「正规表达式」检验格式 if (id.search(/^[A-Z](1|2)\d{8}$/i) == -1) { return "身份证号码格式不对!"; } else { //将字符串分割为数组(IE必需这么做才不会出错) id = id.split(''); //计算总分 var total = city[id[0].charCodeAt(0)-65]; for(var i=1; i<=8; i++){ total += eval(id[i]) * (9 - i); } //补上检查码(最后一码) total += eval(id[9]); //检查比对码(余数应为0); if (total%10 == 0) { return "true"; } else { return "身份证号码格式不对!"; } } }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值