正則得介紹和使用——表單驗證

一、正則的概念

　　（1）js這門語言一開始誕生得目的是什麼？

　　　　　　就是爲了作表單驗證。在JS未出現之前，表單的信息驗證須要傳輸給後臺，讓後臺作數據驗證處理以後，再返回給前端頁面處理的結果。在帶寬有限的狀況下，整個驗證過程很是複雜，且耗時。

　　　　　　在使用JS作驗證的過程當中，一個簡單的驗證規則的實現很是的麻煩。

    　　　　　如：從雜亂的字符串中找數字

    var str = "asd68asd687as6da78sd123123zcacas"
    var linshi='';
    var arr=[]
    for(var i = 0 ; i < str .length ; i ++){
        if(str.charAt(i)>=0&&str.charAt(i)<=9){
            linshi+=str.charAt(i)
        }else{
            if(linshi!=''){
                arr.push(linshi)     
            }
        }
    }
    if(linshi!=''){
        arr.push(linshi)     
    }
    console.log(arr)

　　　　　　若是咱們使用正則呢？

 var arr = str.match(/\d+/g);

  　　　　　是的使用正則和使用傳統的js代碼均可以實現這個功能，可是是否是太繁瑣了。

　　（2）、什麼是正則？

 　　　　　正則表達式（regular expression）是一個描述字符規則的對象。能夠用來檢查一個字符串是否含有某個字符，將匹配的字符作替換或者從某個字符串中取出某個條件的子串等。

　　　　　　

        　　　正則表達式：

       　　　 正則表達式其實就是一種規則，其實把正則稱做規則表達式更爲恰當。正則的語法基於一種古老的perl語言。

　　（3）、爲何要使用正則呢？　　

　　　　　前端每每有大量的表單數據校驗工做，採用正則表達式會使得數據校驗的工做量大大減輕。經常使用效果：郵箱，手機號，身份證號等（使用熟練的狀況下）

　　　　　正則的使用理念：

    　　　   任何程序均可以不用正則表達式寫出來，但根據懶人原則，怎麼作不言而喻。

 

 2.正則的建立方式

　　正則的建立方式：

　　（1）.構造函數方式

        var reg1 = new RegExp("a");
        var str = "adassdfsd";
        console.log(str.match(reg1))        //輸出匹配a的字符

　　（2）.字面量方式，古老的perl語言風格

        var reg2 = /a/;
        console.log(str2.match(reg2));      //輸出匹配a的字符

　　（3）經常使用的正則表達式

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

　　　　" " 是字符串的標識符
　　　　[ ] 是數組的標識符
　　　　{ } 是對象的標識符

　　　　正則中的修飾符，寫在正則表達式後面／的後面：
　　　　g表示全局匹配，查找全部
　　　　i表示忽略大小寫

　　　　\d 匹配全部的數字
*/
　　　　var reg = /\d/g;
　　　　console.log(str.match(reg)) //打印字符串中全部的數字

/* 　　+ 若干，量詞，表示多少個均可以，至少1個，無上限*/

　　　　var reg = /\d+/g;
　　　　console.log(str.match(reg)) //打印字符串中全部的數字,連續

/* 　　 | 表示或，相似於js中的 || */
　　　　var reg = /abc|bbc|cbc|dbc/g
　　　　console.log(str.match(reg)); //打印字符串中的abc，bbc，cbc，dbc
　　　　var reg = /[a-c]bc/g

/*　　　[ ] 中元符*/
　　　　var reg = /[a-z]/ //匹配全部字母
　　　　[0-9] == \d
/* 　　^ 排除（除了）*/
　　　　var reg = /[^0-9]/ //表示除了數字以外全部

/*　　 . 表明全部，不建議使用*/
　　　　var reg = /<.+>/g
　　　　console.log(str.replace(reg,"")) //過濾，表示尖括號裏面的東西不要，可是？
//　　　正則的貪婪定律：
　　　　var reg = /<[^<>]+>/g
　　　　console.log(str.replace(reg,"")) //表示尖括號裏面的東西不要，真
/*
　　　　轉義字符：
　　　　\d —— [0-9] 數字
　　　　\w —— [a-z0-9_] 數字，字母，下劃線
　　　　\s —— 空白字符（空格）

　　　　\D —— [^0-9] 非數字
　　　　\W —— [^a-z0-9_] 非數字，字母，下劃線
　　　　\S —— 非空白字符

　　　　量詞：限定符，能夠指定正則表達式的一個給定組，必需要出現多少次才能知足匹配
　　　　* 匹配前面的子表達式零次或屢次
　　　　+ 匹配前面的子表達式至少一次或屢次
　　　　? 匹配前面的子表達是零次或一次
　　　　{n} 匹配肯定n次
　　　　{n,} 至少匹配n次
　　　　{n,m} 至少匹配n次，最多匹配m次

　　　　注：在限定符後緊跟？，則由貪婪匹配變成非貪婪匹配
*/

http://tool.oschina.net/uploads/apidocs/jquery/regexp.html

tip：推薦的一個正則表達式手冊

 

3.字符串.replace(oldstr, newstr)函數 和 字符串.match(正則)函數

　　字符串的replace函數的功能：將老字符串替換成新字符串

　　能夠利用此函數，將老字符串表示成正則表達式，對字符串進行替換

　　如：字符串中的abc替換成「哈哈」，若是正則後面沒有g，則只替換一個，若是沒有i，則大寫不會替換

    var str = 「abc123abc456abbcdABCefaacbcdbcabc";
    var reg = /abc/g;
    console.log(str.replace(reg,"哈哈"));

tip：字符串match函數的功能：提取全部的想要的東西，返回一個數組，包含全部符合條件的字符。

tip：看一些小練習

   // qq號驗證規則:
    var reg = /[1-9]\d{4,10}/

    //固化的規則：0411-6666888
    //規則：開頭爲0或者2的或者三位數字加上-開頭爲非零的八位數字，結尾是1到4的分機號
    var reg = /(0\d{2,3}-)?[1-9]\d{7}(-\d{1,4})?/

    //複雜郵箱的規則：英文數字下劃線@一串英文或數子.一串英文
    var reg = /\w+@[a-z0-9]+\.[a-z]+/i
    //想要校驗怎麼辦？在正則轉義字符前加上\

    //刪除多餘空格  
    str.replace(/\s+/g,'');

    //刪除首尾空格
    str.replace(/^\s+/,'');
    str.replace(/\s+$/,'');
 
    //檢查郵政編碼  共 6 位數字，第一位不能爲 0
    /^[1-9]\d{5}$/

    //ps：規則能夠本身定，也能夠別人定，咱們本身寫的練習固然是咱們本身定，可是之後定規則必定要跟你產品經理溝通好，不是你想怎麼定就怎麼定。

 四、正則的方法

    正則.test(字符串)方法，返回值是true和false

    正則.test(字符串)有一個特性，就是隻要字符串的一部分符合要求，那麼就會返回true

　解決方法：

在正則的一開始加上^表示開始

在正則的結尾處加上$表示結束

tip:exec()找到了返回數組，找不到反回null

 

五、咱們經常使用的檢測方式

//（1）.中文檢測
    //unicode編碼中文監測：
    /^[\u2E80-\u9FFF]+$/

//（2）.用戶名檢測 
    /^[a-z0-9_-]{3,16}$/

//（3）郵箱檢測
    /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
//     能夠屢次出現 (字母數字下劃線.-)@能夠出現多個(數字字母.-).2到6位字母或.
    /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
//    能夠有多個(字母數字)可有多個可無(.多個(字母數字))@能夠多個(數字字母可   有1次可無(-數字字母))能夠有多個(1或2個.多個字母)
//示例：abc123@123abc.com

//（4）URL檢測
    /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w\.-]*)*\/?$/
//    有1次或0次(http有1次或0次s : //) 能夠多個(數字字母.-) . 2到6位(字母.) 可多個或0個 (能夠多個或0個 /數字字母下劃線.-) 可0或1次/

//    示例 ：http://sh.op-ta.l.baidu.com

//（5）HTML標籤檢測
    /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
//    <多個(字母)可多個或0個(除了<的全部字符)  />
//    <多個(字母)可多個或0個(除了<的全部字符)>多個任意字符   </重複第一部分的多個字母>

//（6）自定義的html標籤
/<[^<>]+>/g

六、表單及ajax綜合驗證-案例

規則：

（1）.用戶名           用戶名僅支持中文、字母、數字、「-」「_」的組合，4-20個字符

（2）.密碼的規則        數字字母特殊字符，一種類型，弱。兩種類型爲中，三種類型爲強

（3）.重複密碼            跟第一次輸入 密碼一致

（4）.手機號的驗證      第一位必須爲1，後面再加10位數字

（5）.郵箱                數字大小寫字母_- 3到12位   @  數字字母 2到9位  . 字母2到5位

（6）.提交按鈕的時候，判斷全部輸入數據是否符合。符合跳轉，否，不跳

 

tip：寫的很簡陋的一個表單驗證，最後沒有用php、mysql作後臺數據的查詢，由於本地服務器也看不了。

    //css樣式
    <style>
        .error{color: red;}
        .success{color: green;border: 2px solid green;}
    </style>

//html樣式
<body>
    <form action="http://www.jd.com">
        <h2>註冊</h2>
        <p>帳號:<input type="text" id="user"><span class="error"></span></p>
        <p>密碼:<input type="text" id="pass"><span class="error"></span></p>
        <p>確認密碼:<input type="text" id="validatePass"><span class="error"></span></p>
        <p>手機號:<input type="text" id="phoneNum"><span class="error"></span></p>
        <p>郵箱:<input type="text" id="email"> <span class="error"></span></p>
        <input type="submit" id="btn" value="提交註冊信息">
    </form>
</body>


//js樣式
<script>
    // 每次輸入框失去焦點的時候驗證輸入框內容; => 正確 給予正確提示，錯誤給予提示;
    // 當點擊提交按鈕的時候，全部輸入項要正確驗證纔可跳轉; 數組 裏面全部的項都驗證成功;
    var aValidate = [false,false,false];//驗證數組;
    function $(id){
        return document.getElementById(id);
    }
    var oBtn = $("btn");
    var oUser = $("user");
    var oPass = $("pass");
    var oValidatePass = $("validatePass");
    oUser.onblur = function(){
        var sUser = oUser.value;
        var reg = /^[a-z0-9_\-\u4e00-\u9fa5]{4,20}$/gi
        //console.log(sUser);
        if(reg.test(sUser)){
            //符合規則;
            oUser.className = "success";
            oUser.nextElementSibling.innerHTML = "";
            aValidate[0] = true;
        }else{
            //console.log(oUser.nextElementSibling);
            oUser.className = "error";
            oUser.nextElementSibling.innerHTML = "支持中文、字母、數字、「-」「_」的組合，4-20個字符";
            aValidate[0] = false;
        }
    }
    //斷定密碼難度 
    oPass.onblur = function(){
        var sPass = oPass.value;
        var reg = /^[^\\*\u4e00-\u9fa5]{6,20}$/
        if(reg.test(sPass)){
            //驗證成功;
            // 驗證密碼強度;
            // 三個判斷分別加分 => 
                //1.有數字 加一分;
                //2.有字母 加一分;
                //3.有特殊符號加一分;
            var mark = 0;
            //斷定是否有數字;
            var hasNum = /\d/g
            if(hasNum.test(sPass)){
                mark++;
            }
            var hasLetter = /[a-z]/gi
            if(hasLetter.test(sPass)){
                mark++;
            }
            var hasSymbol = /[!@#\$%\^\.]/g
            if(hasSymbol.test(sPass)){
                mark++;
            }
            switch(mark){
                case 1:
                oPass.style.border = "2px solid #f10";
                oPass.nextElementSibling.innerHTML = "密碼安全度低,建議使用組合密碼!";
                break;
                case 2:
                oPass.style.border = "2px solid yellow";
                oPass.nextElementSibling.innerHTML = "密碼中等,建議使用組合密碼!";
                break;
                case 3:
                oPass.style.border = "2px solid green";
                oPass.nextElementSibling.innerHTML = "你別把本身密碼忘了!";
                setTimeout(function(){
                    oPass.nextElementSibling.innerHTML = "";
                }, 1000);
            }
            oPass.className = "";
            aValidate[1] = true;
        }else{
            oPass.className = "error";
            oPass.style.border = "1px solid #000";
            oPass.nextElementSibling.innerHTML = "請輸入符合規則的密碼";
            aValidate[1] = false;
        }
    }
    oValidatePass.onblur = function(){
        if(oValidatePass.value == oPass.value){
            //正確
            oValidatePass.style.border = "1px solid #ddd";
            oPass.style.border = "1px solid #ddd";
            oValidatePass.nextElementSibling.innerHTML=""
            aValidate[2] = true;
        }else{
            //錯誤;
            oValidatePass.style.border = "2px solid red";
            oValidatePass.nextElementSibling.innerHTML="密碼輸入不一致";
            oPass.style.border = "2px solid red";
            aValidate[2] = false;
        }
    }
    oBtn.onclick = function(event){
        // 是否必填選項選中;
        var isAllValidate = false; //是否所有驗證經過;
        for(var i = 0 ; i < aValidate.length ; i++){
            if(aValidate[i] == false){
                var evt = event || window.event;
                if(evt.preventDefault){
                    evt.preventDefault()
                }else{
                    window.event.returnValue = false;
                }
                break;
            }
        }
    }
</script>