Javascript 笔记与总结（2-18）正则验证与正则匹配

① 判断 String 是否符合正则要求

patt.test(String);

【例】表单提交：

a.用户名不能为空，只能是数字及字母，6-11位

b.email 不能为空且格式正确

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table{
            width:400px;
            height:400px;
            border:0;
            border-collapse: collapse;
            background:orange;
        }

        td{
            border: 1px solid gray;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <form action="">
        <p>用户名:<input type="text" name="username" id=""></p>
        <p>Email:<input type="text" name="email" id=""></p>
        <p><input type="submit" value="提交"></p>
    </form>
</body>
<script>
    document.getElementsByTagName("form")[0].onsubmit = function(){
        var patt = /^[a-zA-Z0-9]{6,11}$/;
        if(!patt.test(document.getElementsByName("username")[0].value)){
            alert("用户名只能是6-11位数字及字母组成");
            return false;
        }

        patt = /^[a-zA-Z0-9.-]+@w+(.w+)+$/;  //域名不能有_,可以有-
        if(!patt.test(document.getElementsByName("email")[0].value)){
            alert("邮箱错误");
            return false;
        }
    }
</script>
</html>

注意：js 正则表达式 // 外面不要加单引号，这点与 php 不同。

② 找出字符串中符合正则的子串

patt.exec(String);

【例】查出含有邮箱的人，给这些人的名字标红

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table{
            width:400px;
            height:400px;
            border:0;
            border-collapse: collapse;
            background:orange;
        }

        td{
            border: 1px solid gray;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <input type="button" value="标红有邮箱的人">
    <ul>
        <li>袁绍</li>
        <li>曹操</li>
        <li>孙坚&lt;sunjian@changsha.com&gt;</li>
        <li>董卓&lt;dongzhuo@xiliang.com&gt;</li>
    </ul>
</body>
<script>
    function find(){
        var lis = document.getElementsByTagName("li");
        var i = 0;
        var patt = /[a-zA-Z0-9.-]+@w+(.w+)+/;
        while(i < lis.length){
            if(null !== patt.exec(lis[i].innerHTML)){ //exec 匹配到值时返回匹配到的值，否则返回null
                lis[i].style.color = "red";
            }
            i += 1; //建议使用 i += 1 代替 i ++
        }
    }

    document.getElementsByTagName("input")[0].onclick = find;    
</script>
</html>