正則表達式驗證表單

正則是用來描述字元規則的，常常用來做表單驗證。先說下正則的創建和簡單的使用吧！

/ / 是正則表達式的標識符

創建

1. 字面量創建　　 var  reg=/a/;
2. 構造函數創建　　var reg=new RegExp("a");

使用：不能直接使用，需配合方法使用

• 字元：

•  正則：

1. 篩選出符合條件的子串
2. 替換符合條件的子串
3. 驗證字元是否符合規則

 1     var ouser = document.getElementById("user");
 2     var opass = document.getElementById("pass");
 3     var opass2 = document.getElementById("pass2");
 4     var obtn = document.getElementById("btn");
 5 
 6     // 提前定義每個輸入框的成功狀態：false為失敗，true為成功
 7     var u = p = p2 = false;
 8 
 9     // 用戶名僅支持中文、字母、數字、“-”“_”的組合，4-20個字元
10     ouser.onblur = function(){
11         var reg = /^[\u2E80-\u9FFF\w-]{4,20}$/;
12         if(reg.test(this.value)){
13             this.nextElementSibling.innerHTML = "用戶名成功";
14             u = true;
15         }else{
16             this.nextElementSibling.innerHTML = "用戶名僅支持中文、字母、數字、“-”“_”的組合，4-20個字元";
17             u = false;
18         }
19     }
20 
21     // 數字字母特殊字元，一種類型，弱。兩種類型為中，三種類型為強
22     opass.onblur = function(){
23         // 提前定義每種類型的狀態：0為沒有，1為出現
24         var a=b=c=0;
25         // 是否出現數字a
26         var aReg = /\d/;
27         if(aReg.test(this.value)){
28             a = 1;
29         }
30         // 是否出現字母b
31         var bReg = /[a-zA-Z]/;
32         if(bReg.test(this.value)){
33             b = 1;
34         }
35         // 是否出現特殊c
36         var cReg = /[\W]/;
37         if(cReg.test(this.value)){
38             c = 1;
39         }
40         // 狀態累加之後，判斷總和，判斷難度類型
41         switch(a+b+c){
42             case 1:
43                 this.nextElementSibling.innerHTML = "簡單";break;
44             case 2:
45                 this.nextElementSibling.innerHTML = "一般";break;
46             case 3:
47                 this.nextElementSibling.innerHTML = "困難";break;
48         }
49         p = true;
50 
51         
52         // 在第一次輸入密碼時，只要重覆密碼不為空，都做重覆密碼的驗證
53         if(opass2.value == "") return;
54         if(this.value === opass2.value){
55             opass2.nextElementSibling.innerHTML = "一致";
56             p2 = true;
57         }else{
58             opass2.nextElementSibling.innerHTML = "不一致";
59             p2 = false;
60         }
61     }
62 
63     opass2.onblur = function(){
64         if(this.value === opass.value){
65             this.nextElementSibling.innerHTML = "一致";
66             p2 = true;
67         }else{
68             this.nextElementSibling.innerHTML = "不一致";
69             p2 = false;
70         }
71     }
72 
73     obtn.onclick = function(){
74         // 提交時，判斷所有輸入框的狀態必須全為true
75         if(u && p && p2){
76             alert("ok")
77         }else{
78             // 只要有一個不為true，都單獨判斷，找到真正的錯誤
79             if(!u){
80                 alert("用戶名error")
81             }
82             if(!p){
83                 alert("密碼error")
84             }
85             if(!p2){
86                 alert("重覆密碼error")
87             }
88         }
89     }

之前沒有正則的時候做表單驗證很麻煩，用正則幾行代碼就可以判斷是否滿足，是不是很好用呢。正則隨便怎麼寫都行，但要知道寫的是設麽規則，根據這個規則能寫出正確的字元哦。很多人會覺得正則很難，看上去跟亂碼一樣，但如果一點點的拆分開來，沒有那麼難。可以多看看，多寫寫，感受下到底是什麼樣的。就像別人一說一都理解，但一敲代碼就出錯，都是一樣的。多練多看！