JavaScript笔记之表单和正则表达式-js教程-PHP中文网

JavaScript笔记之表单和正则表达式

高洛峰

发布： 2016-11-26 09:57:17

原创

1597人浏览过

正则表达式是一种对文本字符串进行验证和格式化的极其强大的方式。通过使用正则表达式，可以用一两行javascript代码完成原本需要几十行代码的复杂任务。
       正则表达式是一种特殊符号编写的模式，描述一个或多个文本字符串，常常被认为是编程中最棘手的部分之一，但是只要把混乱的正则表达式分解成有意义的小块，其语法并不难理解。
       下面的一个例子，是用正则表达式验证电子邮件地址：
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>email validation</title>
    <link type="text/css" rel="stylesheet" href="http://www.php.cn/">     <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";
            }
        }
    }
}

现在开始解释红色代码行：
      正则表达式总是以斜杠(/)开头和结尾。
      脱字符(^)表示要使用这个表达式检查以特定的字符串开头的字符串。
      表达式\w表示任意单一字符，包括a~z、A~Z、0~9或下划线。
      加号+表示要寻找前面条目的一次或多次出现。
      前圆括号(表示一个组。
      方括号[]用来表示可以出现其中任意一个字符，这个方括号内包含字符\.-，但是点号对于正则表达式是有特殊意义的，所以需要在它前面加上反斜杠\，这表示指的实际上是点号本身，而不是它的特殊意义。在特殊字符串前面使用反斜杠称为“对字符转义”。
      问号?表示前面的条目可以不出现或出现一次。问号后再次使用\w+，表示点号或连字符后面必须有其他一些字符。
      后圆括号表示这个组结束了。在此后是一个星号*，表示前面的条目可以不出现或出现多次。
      @字符仅仅代表它本身，没有任何其他意义。
      接下来再次使用\w+，表示域名必须以一个或多个a~z、A~Z、0~9或下划线开头。在此之后同样是([\.-]?\w+)*，这表示电子邮件地址的后缀中允许有点号或连字符。
      然后，在一对圆括号中建立另一个组:\.\w{2,3}，表示希望找到一个点号，后面跟着一些字符。花括号中的数字表示前面的条目可以出现2次或3次。
      最后正则表达式的末尾是一个美元符号$，表示匹配的字符串必须在这里结束。

      return re.test(email);这一行获得前一步中定义的正则表达式，并使用test()方法验证电子邮件的有效性。
      如果不用正则表达式，则要使用多出数十行的代码来完成相同的代码
[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";
            }
        }
    }
}
        由此可见使用正则表达式确实可以减少大量代码。

大家都在看：

动态按钮波纹悬停效果实现与优化教程 JavaScript_搜索引擎优化与性能提升 JavaScript数组方法_函数式操作与性能基准测试 JavaScript元编程_Proxy与Reflect高级技巧 JavaScript组合模式_树形结构操作