首頁 > 開發者 > JavaScript

JavaScript筆記之表單和Regex

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Regex是一種對文本字串進行驗證和格式化的極其強大的方式。通過使用Regex，可以用一兩行JavaScript程式碼完成原本需要幾十行代碼的複雜任務。
       Regex是一種特殊符號編寫的模式，描述一個或多個文本字串，常常被認為是編程中最棘手的部分之一，但是只要把混亂的Regex分解成有意義的小塊，其文法並不難理解。
       下面的一個例子，是用Regex驗證電子郵件地址：
[html]
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Email Validation</title> 
    <link type="text/css" rel="stylesheet" href="script01.css" /> 
    <script type="text/javascript" src="script01.js"></script> 
</head> 
<body> 
    <h2 align="center">Email Validation</h2> 
    <form action="someAction.cgi"> 
        <p><label>Email Address: 
        <input class="email" type="text" size="50" /></label></p> 
        <p><input type="reset" /> <input type="submit" value="Submit" /></p> 
    </form> 
</body> 
</html> 

script01.css
[css]
body { 
    color: #000; 
    background-color: #FFF; 
} 
 
input.invalid { 
    background-color: #FF9; 
    border: 2px red inset; 
} 
 
label.invalid { 
    color: #F00; 
    font-weight: bold; 
} 

script01.js
[javascript]
window.onload = initForms; 
 
function initForms() { 
    for (var i=0; i< document.forms.length; i++) { 
        document.forms[i].onsubmit = function() {return validForm();} 
    } 
} 
 
function validForm() { 
    var allGood = true; 
    var allTags = document.getElementsByTagName("*"); 
 
    for (var i=0; i<allTags.length; i++) { 
        if (!validTag(allTags[i])) { 
            allGood = false; 
        } 
    } 
    return allGood; 
 
    function validTag(thisTag) { 
        var outClass = ""; 
        var allClasses = thisTag.className.split(" "); 
     
        for (var j=0; j<allClasses.length; j++) { 
            outClass += validBasedOnClass(allClasses[j]) + " "; 
        } 
     
        thisTag.className = outClass; 
     
        if (outClass.indexOf("invalid") > -1) { 
            invalidLabel(thisTag.parentNode); 
            thisTag.focus(); 
            if (thisTag.nodeName == "INPUT") { 
                thisTag.select(); 
            } 
            return false; 
        } 
        return true; 
         
        function validBasedOnClass(thisClass) { 
            var classBack = ""; 
         
            switch(thisClass) { 
                case "": 
                case "invalid": 
                    break; 
                case "email": 
                    if (allGood && !validEmail(thisTag.value)) classBack = "invalid "; 
                default: 
                    classBack += thisClass; 
            } 
            return classBack; 
        } 
                 
        function validEmail(email) { 
            <span style="color:#ff0000;">var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
 
</span>           return re.test(email); 
        } 
         
        function invalidLabel(parentTag) { 
            if (parentTag.nodeName == "LABEL") { 
                parentTag.className += " invalid"; 
            } 
        } 
    } 
} 

現在開始解釋紅色程式碼：
      Regex總是以斜杠(/)開頭和結尾。
      脫字元(^)表示要使用這個運算式檢查以特定的字串開頭的字串。
      運算式\w表示任意單一字元，包括a~z、A~Z、0~9或底線。
      加號+表示要尋找前麵條目的一次或多次出現。
      前圓括弧(表示一個組。
      方括弧[]用來表示可以出現其中任意一個字元，這個方括弧內包含字元\.-，但是點號對於Regex是有特殊意義的，所以需要在它前面加上反斜線\，這表示指的實際上是點號本身，而不是它的特殊意義。在特殊字元串前面使用反斜線稱為“對字元轉義”。
      問號?表示前面的條目可以不出現或出現一次。問號後再次使用\w+，表示點號或連字號後面必須有其他一些字元。
      後圓括弧表示這個組結束了。在此後是一個星號*，表示前面的條目可以不出現或出現多次。
      @字元僅僅代表它本身，沒有任何其他意義。
      接下來再次使用\w+，表示網域名稱必須以一個或多個a~z、A~Z、0~9或底線開頭。在此之後同樣是([\.-]?\w+)*，這表示電子郵件地址的尾碼中允許有點號或連字號。
      然後，在一對圓括弧中建立另一個組:\.\w{2,3}，表示希望找到一個點號，後面跟著一些字元。花括弧中的數字表示前面的條目可以出現2次或3次。
      最後Regex的末尾是一個貨幣符號$，表示匹配的字串必須在這裡結束。
 
      return re.test(email);這一行獲得前一步中定義的Regex，並使用test()方法驗證電子郵件的有效性。
      如果不用Regex，則要使用多出數十行的代碼來完成相同的代碼
[javascript]
function validEmail(email) { 
            var invalidChars = " /:,;"; 
         
            if (email == "") { 
                return false; 
            } 
            for (var k=0; k<invalidChars.length; k++) { 
                var badChar = invalidChars.charAt(k); 
                if (email.indexOf(badChar) > -1) { 
                    return false; 
                } 
            } 
            var atPos = email.indexOf("@",1); 
            if (atPos == -1) { 
                return false; 
            } 
            if (email.indexOf("@",atPos+1) != -1) { 
                return false; 
            } 
            var periodPos = email.indexOf(".",atPos); 
            if (periodPos == -1) {   
                return false; 
            } 
            if (periodPos+3 > email.length)  { 
                return false; 
            } 
            return true; 
        } 
         
        function invalidLabel(parentTag) { 
            if (parentTag.nodeName == "LABEL") { 
                parentTag.className += " invalid"; 
            } 
        } 
    } 
}  
        由此可見使用Regex確實可以減少大量代碼。
        關於更詳細的Regex介紹可參看：http://www.bkjia.com/kf/201108/99384.html 


摘自  Yanghai 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More