黑马程序员技术交流社区

标题: js中身份证号的验证方法 [打印本页]

---

作者: 王怀亮    时间: 2013-4-19 19:33
标题: js中身份证号的验证方法
首先是js函数中的代码：

1. /* 鼠标在身份证号文本框中时 */
   
2. function cardIDFocus() {
   
3.         var nickName = document.getElementById("cardID");
   
4.         var nickNameId = document.getElementById("cardID_prompt");
   
5.         nickName.className = "input input_Focus";
   
6.         nickNameId.innerHTML = "请填写18位的身份证号";
   
7.         nickNameId.className = "prompt";
   
8. }
   
9. /* 鼠标离开身份证号文本框中时 */
   
10. function cardIDBlur() {
    
11.         var idCard = document.jbxxForm.cardID.value;
    
12.         var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
    
13.         var nickName = document.getElementById("cardID");
    
14.         var nickNameId = document.getElementById("cardID_prompt");
    
15.         nickNameId.innerHTML = "";
    
16.         if (nickName.value == "") {
    
17.                 nickNameId.innerHTML = "身份证号为必填项，请填写您的身份证号";
    
18.                 nickNameId.className = "prompt_error";
    
19.                 nickName.className = "input input_Blur";
    
20.                 return false;
    
21.         } else if (regIdCard.test(idCard)) {
    
22.                 if (idCard.length == 18) {
    
23.                         var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10,
    
24.                                         5, 8, 4, 2); // 将前17位加权因子保存在数组里
    
25.                         var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); // 这是除以11后，可能产生的11位余数、验证码，也保存成数组
    
26.                         var idCardWiSum = 0; // 用来保存前17位各自乖以加权因子后的总和
    
27.                         for ( var i = 0; i < 17; i++) {
    
28.                                 idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
    
29.                         }
    
30.                         var idCardMod = idCardWiSum % 11;// 计算出校验码所在数组的位置
    
31.                         var idCardLast = idCard.substring(17);// 得到最后一位身份证号码
    
32.                         // 如果等于2，则说明校验码是10，身份证号码最后一位应该是X
    
33.                         if (idCardMod == 2) {
    
34.                                 if (!(idCardLast == "X" || idCardLast == "x")) {
    
35.                                         nickNameId.innerHTML = "身份证号码无效";
    
36.                                         nickNameId.className = "prompt_error";
    
37.                                         nickName.className = "input input_Blur";
    
38.                                         return false;
    
39.                                 }
    
40.                         } else {
    
41.                                 // 用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
    
42.                                 if (!(idCardLast == idCardY[idCardMod])) {
    
43.                                         nickNameId.innerHTML = "您填写的不是正确的身份证号";
    
44.                                         nickNameId.className = "prompt_error";
    
45.                                         nickName.className = "input input_Blur";
    
46.                                         return false;
    
47.                                 }
    
48.                         }
    
49.                 } else {
    
50.                         nickNameId.innerHTML = "身份证号必须为18位";
    
51.                         nickNameId.className = "prompt_error";
    
52.                         nickName.className = "input input_Blur";
    
53.                         return false;
    
54.                 }
    
55.         } else {
    
56.                 nickNameId.innerHTML = "必须填写您真实的身份证号";
    
57.                 nickNameId.className = "prompt_error";
    
58.                 nickName.className = "input input_Blur";
    
59.                 return false;
    
60.         }
    
61.         nickNameId.className = "prompt_ok";
    
62.         nickName.className = "input";
    
63.         return true;
    
64. }

复制代码

为了在显示提示时，提示客户，可用CSS动态改变文本框的效果：

1. /*注册页面提示样式*/
   
2. .input_Blur {
   
3.         background-color: #fef4d0;
   
4.         border: solid 1px #999;
   
5.         margin: 0px 0px 8px 0px;
   
6.         height: 25px;
   
7. }
   
8. 
   
9. .input_Focus {
   
10.         background-color: #f1ffde;
    
11.         border: solid 1px #999;
    
12.         margin: 0px 0px 8px 0px;
    
13.         height: 25px;
    
14. }
    
15. 
    
16. .reg_input {
    
17.         height: 25px;
    
18. }
    
19. 
    
20. .prompt {
    
21.         font-size: 15px;
    
22.         color: #999;
    
23. }
    
24. 
    
25. .prompt_error {
    
26.         font-size: 15px;
    
27.         color: #C8180B;
    
28.         border: solid 1px #999;
    
29.         background-color: #fef4d0;
    
30.         padding: 0px 5px 0px 5px;
    
31.         height: 20px;
    
32. }
    
33. 
    
34. .prompt_ok {
    
35.         background-image: url(../image/register_write_ok.gif);
    
36.         background-repeat: no-repeat;
    
37.         width: 15px;
    
38.         height: 20px;
    
39.         margin: 5px 0px 0px 5px;
    
40. }
    

复制代码

上面使用的图片可自行选择，并根据自己项目中的路径更改路径

---

作者: 回首、后_街    时间: 2013-4-19 21:05
好的  学习了。。。。。。。。

---

作者: $love    时间: 2013-4-19 21:06
不错！！！赞一个

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2