我要一段验证身份证的js加上表单的写法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我要一段验证身份证的js加上表单的写法相关的知识，希望对你有一定的参考价值。
RT，网上的身份证验证js很多，但是function checkIdcard(idcard) 带参数的这种，表单里的事件我不会写，所以请把完整网页贴出来。找了几个不带参数的，虽然可以用，但是缺点是，在多个表单的时候就会锁定在这个身份证表单里无法跳出。还有我希望输入错误身份证后，弹窗提示错误类型，然后自动清除输入的身份证，求大神给写一个。
参考技术A 验证身份证的核心函数function IDCardRegex(v)
v = SpaceClear(v);
if (v.length != 18)
//alert("长度不正确");
return false;
var numrex = /[0-9xX]/g;
if (v.replace(numrex, '') != '')
//alert("字符不正确");
return false;
var address = "11x22x35x44x53x12x23x36x45x54x13x31x37x46x61x14x32x41x50x62x15x33x42x51x63x21x34x43x52x64x65x71x81x82x91";
var left2=v.substr(0,2);
if (address.indexOf(left2) < 0)
//alert("地区信息不正确");
return false;
var birth = v.substr(6, 8);
birth = birth.substr(0, 4) + "-" + birth.substr(4, 2) + "-" + birth.substr(6);
var birthday = new Date(birth);
if (birthday.getDate().toString() == 'NaN')
//alert("生日不正确");
return false;
//效验码
var Wistr = "7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2";
var Wis = Wistr.split(',');
var Sums = 0;
var Sum = 0;
var c;
for (var i = 0; i < 17; i++)
c = v.substr(i, 1);
Sum = parseInt(c) * parseInt(Wis[i]);
Sums += Sum;
var Y = Sums % 11;
var T = v.substr(17, 1);
if (T == 'X')
T = 'x';
var E = '';
switch (Y)
case 0:
Y = 1;
break;
case 1:
Y = 0;
break;
default:
Y = 12 - Y;
break;
E = Y.toString();
if (Y == 10)
E = 'x';
if (E != T)
// alert("效验码不正确");
return false;
// alert("检查完毕");
return true;
调用函数:
var idcardno='*****';
if(!IDCardRegex(idcardno))
//alert("身份证号码格式不正确");
会返回true或false
页面结合代码示例如下：
<input type="text" id="text_idcard" /><span id="span_idcard"></span><input type="button" id="btn_ok" value="确定" />
js代码如下 引用jquery
$(function()$("#text_idcard").blur(function()//当输完身份证号码 将鼠标点击其他地方时候触发事件
var idcard=$("#text_idcard").val();
idcard=idcard.replace(/\\s+/g,"");
if(IDCardRegex(idcard))
$("#span_idcard").text("身份证格式正确");
//验证通过 提示可有可无
else
//验证未通过
$("#span_idcard").text("身份证格式不正确");
$("#text_idcard").focus();//让焦点重新回到身份证输入框
)
$("#btn_ok").click(function()//按钮提交事件 这个可以写在下面一个函数里
var idcard=$("#text_idcard").val();
idcard=idcard.replace(/\\s+/g,"");
if(!IDCardRegex(idcard))
//验证未通过
$("#span_idcard").text("身份证格式不正确");
$("#text_idcard").focus();//让焦点重新回到身份证输入框
return false;//阻止按钮向下执行
)
)
function btn_send()
//----把按钮执行事件写在这里 然后按钮属性加上onclick="return btn_send()"
上面是手写代码 看LZ对js不太熟悉代码就啰嗦了很多
追问说实话，你的答案真不是我想要的，我自己研究下解决问题了，看在你这么热心的份儿上，采纳了
本回答被提问者采纳 参考技术B 你给个分给我，我去帮你找一个。 参考技术C 看明白了，不是不会验证，而是不知道怎么和页面结合起来吧？追问我用PAGEADMIN做的网站，需要在会员字段验里填上input里的事件进行js验证，所以我想要表单事件的写法。。。。现在有个奇怪问题，找了两个能用的，一个是事件写进去后不填入正确的身份证就锁定在这个表单里出不来，直到填入正确身份证，还有一个填入错误身份证倒是可以跳出来，但是在单独网页里填入正确身份证提示验证通过，写在cms里，即使填入正确身份证也提示“请填入人员身份证”。。。。
jQuery学习jQuery插件的使用与写法（表单验证插件-validation）
最新最全的插件可以从jQuery官方网站的插件板块下载，网站地址为：http://plugins.jquery.com/
Validation优点：内置验证规则；自定义验证规则；简单强大的验证信息提示；实时验证。
三种不同的写法
1.1 确认哪个表单需要被验证，引入jquery.validate.js插件
<script type="text/javascript"> $(document).ready(function(){ $("#commentForm").validate();/*确定哪个表单需要被验证；*/ }); </script>
1.2 针对不同字段，进行验证规则编码，设置字段相应的属性
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label>
<em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" /><!--必须填写，最小长度-->
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" /><!--url格式验证-->
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
2.1 再引入jquery.metadata.js插件（支持固定格式解析的jQuery插件）后可以采用不同的写法
<script type="text/javascript"> $(document).ready(function(){ $("#commentForm").validate({meta: "validate"}); }); </script>
2.2 效果与1.2相同，写法不同而已
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label>
<em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2}}" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" class="{validate:{required:true, email:true}}" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" value="" class="{validate:{url:true}}" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true}}" ></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
3.1 在$("#commentForm").validate（）方法中增加rules属性
<script type="text/javascript"> $(document).ready(function(){ $("#commentForm").validate({ rules: { username: { required: true, minlength: 2 }, email: { required: true, email: true }, url:"url", comment: "required" } }); }); </script>
3.2 将字段中的class属性移除，通过name属性匹配验证规则
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<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="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" value="" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
以上三种写法的验证结果如下
validation默认是提示英文，要显示中文，可以引入jquery.validate.messages_cn.js，其内容如下
jQuery.extend(jQuery.validator.messages, { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符串", maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"), minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"), rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"), range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"), max: jQuery.format("请输入一个最大为 {0} 的值"), min: jQuery.format("请输入一个最小为 {0} 的值") });
此时提示结果为（中文，覆盖了原来的英文提示）
还可以自定义验证规则，如修改字段提示信息的class值，为验证提示信息添加图片，增加“验证码”
程序中增加了messages属性
<script type="text/javascript"> $(document).ready(function(){ //自定义一个验证方法 $.validator.addMethod( "formula", //验证方法名称 function(value, element, param) {//验证规则 return value == eval(param); }, \'请正确输入数学公式计算后的结果\'//验证提示信息 ); $("#commentForm").validate({ rules: { username: { required: true, minlength: 2 }, email: { required: true, email: true }, url:"url", comment: "required", valcode: { formula: "7+9" } }, messages: { username: { required: \'请输入姓名\', minlength: \'请至少输入两个字符\' }, email: { required: \'请输入电子邮件\', email: \'请检查电子邮件的格式\' }, url: \'请检查网址的格式\', comment: \'请输入您的评论\' }, errorElement: "em", //用来创建错误提示信息标签 success: function(label) { //验证成功后的执行的回调函数 //label指向上面那个错误提示信息标签em label.text(" ") //清空错误提示消息 .addClass("success"); //加上自定义的success类 } }); }); </script>
表单部分：
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<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="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" value="" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
</p>
<p>
<label for="cvalcode">验证码</label>
<input id="cvalcode" name="valcode" size="25" value="" />=7+9
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
在CSS中添加失败和成功对应的小图片
em { font-weight: bold; padding-right: 1em; vertical-align: top; } em.error { background:url("images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; } em.success { background:url("images/checked.gif") no-repeat 0px 0px; padding-left: 16px; }
提示结果如下
以上是关于我要一段验证身份证的js加上表单的写法的主要内容，如果未能解决你的问题，请参考以下文章
在 SAFARI 中使用带有表单身份验证的 HTML5 音频
ASP.NET Identity + Windows 身份验证（混合模式 - 表单 + Windows）
JavaScript 正则表单验证（用户名密码确认密码手机号座机号身份证号）