正則表達式驗證表單

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

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

創建

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

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

• 字符：

　　　　str.match(reg)

　　　　str.replace(reg)

•  正則：

　　　　reg.test(str)

特點

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

需注意正則中的修飾符，寫在正則表達式后面／的后面：g表示全局匹配，查找所有；i表示忽略大小寫。

正則的表達式較多，我就不列出了。

這個網站比較齊全，可以看下哈！ http://tool.oschina.net/uploads/apidocs/jquery/regexp.html

正則就介紹到這里，我做了一個表單驗證來感受了下正則的寫法。上代碼一起感受下吧！

    var ouser = document.getElementById("user");
    var opass = document.getElementById("pass");
    var opass2 = document.getElementById("pass2");
    var obtn = document.getElementById("btn");

    // 提前定義每個輸入框的成功狀態：false為失敗，true為成功
    var u = p = p2 = false;

    // 用戶名僅支持中文、字母、數字、“-”“_”的組合，4-20個字符
    ouser.onblur = function(){
        var reg = /^[\u2E80-\u9FFF\w-]{4,20}$/;
        if(reg.test(this.value)){
            this.nextElementSibling.innerHTML = "用戶名成功";
            u = true;
        }else{
            this.nextElementSibling.innerHTML = "用戶名僅支持中文、字母、數字、“-”“_”的組合，4-20個字符";
            u = false;
        }
    }

    // 數字字母特殊字符，一種類型，弱。兩種類型為中，三種類型為強
    opass.onblur = function(){
        // 提前定義每種類型的狀態：0為沒有，1為出現
        var a=b=c=0;
        // 是否出現數字a
        var aReg = /\d/;
        if(aReg.test(this.value)){
            a = 1;
        }
        // 是否出現字母b
        var bReg = /[a-zA-Z]/;
        if(bReg.test(this.value)){
            b = 1;
        }
        // 是否出現特殊c
        var cReg = /[\W]/;
        if(cReg.test(this.value)){
            c = 1;
        }
        // 狀態累加之后，判斷總和，判斷難度類型
        switch(a+b+c){
            case 1:
                this.nextElementSibling.innerHTML = "簡單";break;
            case 2:
                this.nextElementSibling.innerHTML = "一般";break;
            case 3:
                this.nextElementSibling.innerHTML = "困難";break;
        }
        p = true;

        
        // 在第一次輸入密碼時，只要重復密碼不為空，都做重復密碼的驗證
        if(opass2.value == "") return;
        if(this.value === opass2.value){
            opass2.nextElementSibling.innerHTML = "一致";
            p2 = true;
        }else{
            opass2.nextElementSibling.innerHTML = "不一致";
            p2 = false;
        }
    }

    opass2.onblur = function(){
        if(this.value === opass.value){
            this.nextElementSibling.innerHTML = "一致";
            p2 = true;
        }else{
            this.nextElementSibling.innerHTML = "不一致";
            p2 = false;
        }
    }

    obtn.onclick = function(){
        // 提交時，判斷所有輸入框的狀態必須全為true
        if(u && p && p2){
            alert("ok")
        }else{
            // 只要有一個不為true，都單獨判斷，找到真正的錯誤
            if(!u){
                alert("用戶名error")
            }
            if(!p){
                alert("密碼error")
            }
            if(!p2){
                alert("重復密碼error")
            }
        }
    }

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