inform表單驗證，正則表達式，用戶名，身份證，密碼，驗證碼

時間 2019-11-17

標籤 inform 表單驗證正則表達式用戶名身份證密碼驗證碼欄目 HTML 简体版

原文原文鏈接

最近利用空閒時間寫了部分表單驗證，包括用戶名，身份證，密碼，驗證碼，僅爲本身鞏固最近所學的知識數組

表單的樣式使用的是table佈局，由於以爲DIV佈局定位比較麻煩，table有三列，分別爲基本信息，輸入的信息，提示信；輸入信息欄，插入表單dom

 1 <body>    
 2     <table>
 3         <tr>
 4             <td><p>會員名:</p></td>
 5             <td><input type="text" name="" id="Name" value="" required="required"/></td>
 6             <td id="warn"></td>
 7         </tr>
 8         <tr>
 9             <td><p>身份證號:</p></td>
10             <td><input type="text" name="" id="Idcard" value="" /></td>
11             <td id="warn2"></td>
12         </tr>
13         <tr>
14             <td><p>登陸密碼:</p></td>
15             <td><input type="password" name="" id="passWord" value="" /></td>
16             <td id="warn3"></td>
17         </tr>
18         <tr>
19             <td><p>確認密碼:</p></td>
20             <td><input type="password" name="" id="ensure" value="" disabled="disabled"/></td>
21             <td id="warn4"></td>
22         </tr>        
23         <tr id="login">
24             <td><p>驗證碼:</p></td>
25             <td>
26                 <input type="text" name="" id="write" value=""/>
27                 <input type="button" name="" id="yan" value="" disabled="disabled"/>
28                 <button  id="faSong" onclick="pro();Color ()">看不清</button>
29             </td>
30             <td id="warn5"></td>            
31         </tr>
32     </table>
33         <span id="ziFu"></span>
34         <span id="low">弱</span>
35         <span id="mid">中</span>
36         <span id="high">強</span>
37     </body>

進行少許CSS樣式修改，達到佈局效果，總體效果以下：函數

 1 td>p{
 2     text-align: right;
 3     margin-bottom: 10px;
 4 }
 5 input{
 6     margin: 0;
 7     padding: 0;
 8 }
 9 #ziFu{//用戶名字符統計樣式
10     position: absolute;
11     left: 85px;
12     top: 50PX;
13 }
14 span{//提示信息欄樣式
15     font-size: 10px;
16     color:red;
17 }
18 #low,#mid,#high{//密碼強度顯示樣式
19     width:83px ;
20     color: black;
21     text-align: center;
22 }
23 #low{
24     position: absolute;
25     left: 83px;
26     top: 150PX;
27     background-color: red;    
28 }
29 #mid{
30     position: absolute;
31     left: 166px;
32     top: 150PX;
33     background-color: orange;
34 }
35 #high{
36     position: absolute;
37     left: 249px;
38     top: 150PX;
39     background-color: orange;
40 }
41 #login{//驗證碼部分首先隱藏
42     visibility: hidden;
43 }
44 #write,#yan{
45     width: 90px;
46 }
47 input{
48     width: 250px;
49 }
50 [type=button]{
51     font-weight: bold;
52 }

主要使用了onfocus,onkeyup,onblur,onclick事件佈局

首先爲了代碼相對簡單，先返回以下值字體

1 function $(str) { return document.getElementById(str); } ui

同時定義以下變量，用於統計字符數this

1 function nameLen(str) {
2     return str.replace(/[^\x00-\xff]/g, 'yy').length //匹配雙字節字符：[^\x00-\xff]，將漢字轉換成兩個字母
3 }

先進行用戶名驗證：用戶名可使用數字、漢字、字母、下劃線！spa

 1 window.onload = function() {//主要使用onfocus,onkeyup,onblur,onclick事件
 2     //用戶名驗證
 3     var name_len = 0;
 4     var reg = /[^\w\u4e00-\u9fa5]/g //[^\u4e00-\u9fa5]匹配全部漢字
 5     $("Name").onfocus = function() {
 6         $('login').style.visibility = "visible"; //顯示驗證碼
 7         $('warn').innerHTML = '<span id="warn">5-25個字符，一個漢字兩個字符，可使用數字、漢字、字母、下劃線！</span>';
 8     }
 9     $("Name").onkeyup = function() {
10         if(reg.test(this.value)) {
11             $('warn').innerHTML = '<span>含有非法字符！</span>';
12         }
13         $('warn').style.visibility = "visible";
14         $('ziFu').style.visibility = "visible";
15         name_len = nameLen(this.value)
16         $('ziFu').innerHTML = name_len + '個字符';
17         if(name_len == 0) {
18             $('warn').style.visibility = "hidden";
19         }
20     }
21     $("Name").onblur = function() {
22         if($("Name").value == '') {
23             $('warn').innerHTML = '<span>不能爲空！</span>';
24         } else if(name_len < 5) {
25             $('warn').innerHTML = '<span>用戶名小於5個字符！</span>';
26         } else if(name_len > 25) {
27             $('warn').innerHTML = '<span>用戶名大於5個字符！</span>';
28         } else {
29             $('warn').innerHTML = 'OK！';
30         }
31     }

效果以下：3d

身份證驗證：沒有考慮15位身份證的狀況，也沒有考慮全部地區，地區的驗證僅對前兩位進行了驗證，同時出生日期沒有考慮已去世的和未出生的，由於最後一位驗證碼，能夠判斷出身份證號碼是否存在code

 1 //身份證號驗證
 2     $("Idcard").onfocus = function() {
 3         $('warn2').innerHTML = '<span>請輸入二代身份證號碼！</span>';
 4     }    
 5     $("Idcard").onblur = function() {
 6         var regcard = /^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|([7-9]1)|(8[2]))\d{15}[0-9|X]{1}$/; //沒有匹配全部地區
 7         var y = (this.value.substring(6, 10)) * 1;
 8         var m = (this.value.substring(10, 12)) * 1;
 9         var d = (this.value.substring(12, 14)) * 1;
10         var mydate = new Date(y, m - 1, d);
11         if(this.value.length != 18) {//沒有考慮15位號碼身份證
12             $('warn2').innerHTML = '<span>長度有誤,請輸入18位身份證號碼！</span>';
13         } else {
14             if(regcard.test(this.value)) {
15                 if(mydate.getFullYear() != y || mydate.getMonth() != m - 1 || mydate.getDate() != d) {
16                     $('warn2').innerHTML = '<span>出生年月有誤，請從新輸入！</span>';
17                 } else { //驗證最後一位校驗碼
18                     var xiShu = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);//固定的
19                     var yuShu = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
20                     var sum = 0;
21                     for(i = 0; i < xiShu.length; i++) {
22                         sum += xiShu[i] * this.value.substring(i, i + 1)
23                     }
24                     var lastNum = yuShu[sum % 11]
25                     if(lastNum == this.value.substring(17)) {
26                         $('warn2').innerHTML = 'OK!';
27                     } else {
28                         $('warn2').innerHTML = '<span>有誤，請從新輸入！</span>'
29                     }
30                 }
31             } else {
32                 $('warn2').innerHTML = '<span>出現非法字符，請從新輸入！</span>';
33             }
34         }
35     }

效果：

密碼驗證：要求一、密碼長度至少爲6位，請使用數字、字母、下劃線組合！二、密碼必須有數字和字母，不能純數字或字母！三、密碼長度大於6，且含有數字、字母時強度爲中！四、密碼長度大於12，且含有數字、字母時爲強度爲高！五、密碼強度顯示根據輸入密碼變化，密碼強度爲弱，確認密碼不能進行操做；

 1 //密碼驗證
 2     $("passWord").onfocus = function() {
 3         $('warn3').innerHTML = '<span>密碼長度至少爲6位，請使用數字、字母、下劃線組合！</span>'
 4     }
 5     $('passWord').onkeyup = function() {
 6         var regCode = /[^\w]/g;
 7         var regCode1 = /([0-9]+[a-zA-z]+)|([a-zA-z]+[0-9]+)/g //密碼必須有數字和字母
 8         if(regCode.test(this.value)) {
 9             $('warn3').innerHTML = '<span>含有非法字符！</span>';
10         }
11         if(this.value.length > 6 && regCode1.test(this.value)) { //密碼長度大於6，且含有數字、字母時強度爲中
12             $('mid').style.backgroundColor = 'red';
13             $('ensure').removeAttribute('disabled');
14             $('warn4').style.visibility = 'visible';
15             $('warn4').innerHTML = '<span>請再次輸入密碼！</span>';
16         } else {
17             $('mid').style.backgroundColor = 'orange';
18             $('ensure').setAttribute('disabled', "disabled");
19             $('warn4').style.visibility = 'hidden';
20         }
21         if(this.value.length > 12) { //密碼長度大於12，且含有數字、字母時爲強度爲高
22             $('high').style.backgroundColor = 'red';
23         } else {
24             $('high').style.backgroundColor = 'orange';
25         }
26     }
27     $('passWord').onblur = function() {
28         if($("passWord").value == '') {
29             $('warn3').innerHTML = '<span>不能爲空！</span>';
30         } else if(this.value.length < 6) {
31             $('warn3').innerHTML = '<span>密碼小於6個字符！</span>';
32         } else {
33             $('warn3').innerHTML = 'OK！';
34         }
35     }

效果：

確認密碼：確認密碼只須要判斷兩次輸入的密碼是否相同

1 //確認密碼驗證
2     $('ensure').onblur = function() {
3         if($('passWord').value==this.value) {
4             $('warn4').innerHTML = 'OK！';
5         } else {
6             $('warn4').innerHTML = '<span>兩次輸入密碼不同！</span>';
7         }
8     }

最後驗證碼驗證：爲了可以點擊刷新，產生驗證碼函數單獨寫，在HTML文檔中調用，同時頁面頁面加載時需調用一次

1 <tr id="login">
2             <td><p>驗證碼:</p></td>
3             <td>
4                 <input type="text" name="" id="write" value=""/>
5                 <input type="button" name="" id="yan" value="" disabled="disabled"/>
6                 <button  id="faSong" onclick="pro();Color ()">看不清</button>//調用
7             </td>
8             <td id="warn5"></td>            
9         </tr>

產生驗證碼：使用數組，遍歷數組產生隨機6位驗證碼：

 1 function pro() {//產生隨機6位驗證碼
 2     var code1='';
 3     var code2='';
 4     var arr = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
 5         'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
 6         '哎', '呦', '我', '去', '小', '雞', '燉', '蘑', '菇', '天', '王', '蓋', '地', '虎', '隔', '壁', '王', '叔', '叔');
 7     for(var i = 0; i <6; i++) {
 8         var element = Math.floor(Math.random() * arr.length);
 9         code1 += arr[element];
10     }
11     $('yan').value = code1; //獲取驗證碼   
12 }

一樣遍歷數組，產生隨機背景顏色和字體顏色，#+字母+數字構成全部顏色

 1 function Color () {//產生隨機顏色
 2     var color='#';
 3     var bgcolor='#';
 4     var colorArr=new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
 5     for (var j=0;j<6;j++) {
 6         var colOne=Math.floor(Math.random() * colorArr.length);
 7         var colTwo=Math.floor(Math.random() * colorArr.length);
 8         color+=colorArr[colOne];
 9         bgcolor+=colorArr[colTwo];
10     }
11     $('yan').style.color=color;
12     $('yan').style.backgroundColor=bgcolor;
13 }

這兩個函數在頁面加載時均需調用一次（除這兩個函數在HTML中調用了外，其餘函數均在window.onload下調用）：

與確認密碼同樣，確認驗證碼也是判斷兩次的值是否相同

 1     pro();//調用函數（產生驗證碼和顏色的函數）
 2     Color ();
 3     $('write').onfocus=function(){
 4         //$('warn5').style.visibility='visible';
 5         $('warn5').ininnerHTML='<span>請輸入密碼！</span>';
 6     }
 7     $('write').onblur=function(){
 8         if(this.value==$('yan').value){
 9             $('warn5').innerHTML='OK!';
10         }else{
11             $('warn5').innerHTML='<span>驗證碼不正確，請從新輸入！</span>';            
12         }
13     }
14 }

對於表單中的必填項，可使用屬性required="required"

代碼貼出來，便於本身往後修改查找！