4、DOM之正则表达式

正则表达式变量的test()函数可以用于检测、约束输入内容或字符串

正则表达式是用于描述字符排列和匹配模式语法规则的表达式
正则得组成： /^abc,w?$/修饰符
正则中的元字符
.代表除了换行符之外的任意一个字符
. 转义字符只代表.
d 代表匹配一个数字等价于 [0-9]
w 代表匹配一个字符（字母、数字、下划线）等价于[a-zA-Z0-9_]
^ 匹配开始
$ 匹配结束
正则中的量词
* 代表匹配任意个大于等于0 等价于 {0,}
+ 代表匹配至少一个大于等于1 等价于 {1,}
? 代表匹配0次或者1次等价于 {0,1}
{a,} 代表匹配至少a次
{a,b} 代表匹配至少a次,最多b次比如{2,6} 代表至少匹配2次，最多6次
{a} 代表匹配a次
w{2,6} 代表最少2个字符，最多6个字符
d{11} 代表必须11个数字
表示或 (条件1|条件2|条件3) 比如： (男|女)
比如比配acfge 不连续的值使用 [acfge] 代表给定的字符集中匹配一个
如果是连续的值[abcdefgh]或者使用[a-h]
比如写一个规则，匹配至少6个数字，最多8个数字 ===》 /^d{6,8}$/
/^$/ : 代表必须匹配
// ：只代表包含
中文字符： [u4e00-u9fa5]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="fsasfasf" onsubmit=" return ck();">  <!--onsubmit 表单事件，如果里面返回false代表阻止表单的默认提交行为-->
        姓名：<input type="text" name="name" id="name"><span id="nameMsg" style="color: red;">2~20位中文字符</span><br>
        密码：<input type="text" name="password" id="password"><span id="passwordMsg" style="color: red;">6~8位数字</span><br>
        性别：<input type="text" name="sex" id="sex"><span id="sexMsg" style="color: red;">男/女</span><br>
        手机号：<input type="text" name="tel" id="tel"><span id="telMsg" style="color: red;">11位手机号</span><br>
        邮箱：<input type="text" name="email" id="email"><span id="emailMsg" style="color: red;">请输入正确的邮箱</span><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>
<script>
    function ck(){
        //校验姓名，匹配2~20位中文字符  [u4e00-u9fa5]
        var nameReg = /^[u4e00-u9fa5]{2,20}$/;
        //获取名字输入框的值
        var name = document.getElementById("name").value;
        //判断是否匹配,如果匹配返回true
        if (nameReg.test(name)) {
            // alert("用户名校验通过")
            //修改姓名错误信息的内容
            document.getElementById("nameMsg").textContent="正确"
            //操作js样式
            document.getElementById("nameMsg").style.color="green";
        }else {
            //alert("用户名校验失败")
            document.getElementById("nameMsg").textContent="2~20位中文字符"
            //操作js样式
            document.getElementById("nameMsg").style.color="red";
        }

        //获取密码的值
        var password = document.getElementById("password").value;
        //定义密码的规则 ： 6~8位数字
        var passwordReg = /^d{6,8}$/;
        //进行规则校验
        if (passwordReg.test(password)) {
            // alert("密码校验通过")
            document.getElementById("passwordMsg").textContent="正确"
            //操作js样式
            document.getElementById("passwordMsg").style.color="green";
        }else {
            // alert("密码校验失败")
            document.getElementById("passwordMsg").textContent="6~8位数字"
            //操作js样式
            document.getElementById("passwordMsg").style.color="red";
        }

        var sex = document.getElementById("sex").value;
        var sexReg = /^(男|女)$/;
        if (sexReg.test(sex)){
            // alert("性别校验通过")
            document.getElementById("sexMsg").textContent="正确"
        } else {
            // alert("性别校验失败")
        }

        var tel = document.getElementById("tel").value;
        var telReg = /^1d{10}$/;
        if (telReg.test(tel)){
            // alert("手机号校验通过")
            document.getElementById("telMsg").textContent="正确"
        }else {
            // alert("手机号校验失败")
        }

        //邮箱 qq号@qq.com   .cn
        //  w+@w+.(com|cn|com.cn)
        //w{1,}@w{1,}.(com|cn|com.cn)
        var email = document.getElementById("email").value;
        var emailReg = /^w+@w+.(com|cn|com.cn)$/;
        if (emailReg.test(email)){
            // alert("邮箱校验通过")
            document.getElementById("emailMsg").textContent="正确"
        }else {
            // alert("邮箱校验失败")
        }


        return false;
    }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="fsasfasf" onsubmit=" return ck();">  <!--onsubmit 表单事件，如果里面返回false代表阻止表单的默认提交行为-->
        姓名：<input type="text" name="name" id="name"><span id="nameMsg" style="color: red;">3~20位字符，以首字母开头</span><br>
        密码：<input type="text" name="password" id="password"><span id="passwordMsg" style="color: red;">6~8位数字</span><br>
        性别：<input type="text" name="sex" id="sex"><span id="sexMsg" style="color: red;">男/女</span><br>
        手机号：<input type="text" name="tel" id="tel"><span id="telMsg" style="color: red;">11位手机号</span><br>
        邮箱：<input type="text" name="email" id="email"><span id="emailMsg" style="color: red;">请输入正确的邮箱</span><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>
<script>
    function ck(){
        //定义计数器
        var count = 0;

        //校验姓名，
        var nameReg = /^[a-zA-Z]w{2,19}$/;
        //获取名字输入框的值
        var name = document.getElementById("name").value;
        //判断是否匹配,如果匹配返回true
        if (nameReg.test(name)) {
            // alert("用户名校验通过")
            //修改姓名错误信息的内容
            document.getElementById("nameMsg").textContent="正确"
            //操作js样式
            document.getElementById("nameMsg").style.color="green";
        }else {
            count ++;
            //alert("用户名校验失败")
            document.getElementById("nameMsg").textContent="3~20位字符，以首字母开头"
            //操作js样式
            document.getElementById("nameMsg").style.color="red";
        }

        //获取密码的值
        var password = document.getElementById("password").value;
        //定义密码的规则 ： 6~8位数字
        var passwordReg = /^d{6,8}$/;
        //进行规则校验
        if (passwordReg.test(password)) {
            // alert("密码校验通过")
            document.getElementById("passwordMsg").textContent="正确"
            //操作js样式
            document.getElementById("passwordMsg").style.color="green";
        }else {
            count++;
            // alert("密码校验失败")
            document.getElementById("passwordMsg").textContent="6~8位数字"
            //操作js样式
            document.getElementById("passwordMsg").style.color="red";
        }

        var sex = document.getElementById("sex").value;
        var sexReg = /^(男|女)$/;
        if (sexReg.test(sex)){
            // alert("性别校验通过")
            document.getElementById("sexMsg").textContent="正确"
        } else {
            count++;
            // alert("性别校验失败")
        }

        var tel = document.getElementById("tel").value;
        var telReg = /^1d{10}$/;
        if (telReg.test(tel)){
            // alert("手机号校验通过")
            document.getElementById("telMsg").textContent="正确"
        }else {
            count++;
            // alert("手机号校验失败")
        }

        //邮箱 qq号@qq.com   .cn
        //  w+@w+.(com|cn|com.cn)
        //w{1,}@w{1,}.(com|cn|com.cn)
        var email = document.getElementById("email").value;
        var emailReg = /^w+@w+.(com|cn|com.cn)$/;
        if (emailReg.test(email)){
            // alert("邮箱校验通过")
            document.getElementById("emailMsg").textContent="正确"
        }else {
            count++;
            // alert("邮箱校验失败")
        }

        //判断计数器
        if (count > 0){
            alert("请正确输入")
            return false;
        }else {
            alert("校验都通过")
            return true;
        }


    }
</script><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="fsasfasf" onsubmit=" return ck();">  <!--onsubmit 表单事件，如果里面返回false代表阻止表单的默认提交行为-->
        姓名：<input type="text" name="name" id="name"><span id="nameMsg" style="color: red;">3~20位字符，以首字母开头</span><br>
        密码：<input type="text" name="password" id="password"><span id="passwordMsg" style="color: red;">6~8位数字</span><br>
        性别：<input type="text" name="sex" id="sex"><span id="sexMsg" style="color: red;">男/女</span><br>
        手机号：<input type="text" name="tel" id="tel"><span id="telMsg" style="color: red;">11位手机号</span><br>
        邮箱：<input type="text" name="email" id="email"><span id="emailMsg" style="color: red;">请输入正确的邮箱</span><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>
<script>
    function ck(){
        //定义计数器
        var count = 0;

        //校验姓名，
        var nameReg = /^[a-zA-Z]w{2,19}$/;
        //获取名字输入框的值
        var name = document.getElementById("name").value;
        //判断是否匹配,如果匹配返回true
        if (nameReg.test(name)) {
            // alert("用户名校验通过")
            //修改姓名错误信息的内容
            document.getElementById("nameMsg").textContent="正确"
            //操作js样式
            document.getElementById("nameMsg").style.color="green";
        }else {
            count ++;
            //alert("用户名校验失败")
            document.getElementById("nameMsg").textContent="3~20位字符，以首字母开头"
            //操作js样式
            document.getElementById("nameMsg").style.color="red";
        }

        //获取密码的值
        var password = document.getElementById("password").value;
        //定义密码的规则 ： 6~8位数字
        var passwordReg = /^d{6,8}$/;
        //进行规则校验
        if (passwordReg.test(password)) {
            // alert("密码校验通过")
            document.getElementById("passwordMsg").textContent="正确"
            //操作js样式
            document.getElementById("passwordMsg").style.color="green";
        }else {
            count++;
            // alert("密码校验失败")
            document.getElementById("passwordMsg").textContent="6~8位数字"
            //操作js样式
            document.getElementById("passwordMsg").style.color="red";
        }

        var sex = document.getElementById("sex").value;
        var sexReg = /^(男|女)$/;
        if (sexReg.test(sex)){
            // alert("性别校验通过")
            document.getElementById("sexMsg").textContent="正确"
        } else {
            count++;
            // alert("性别校验失败")
        }

        var tel = document.getElementById("tel").value;
        var telReg = /^1d{10}$/;
        if (telReg.test(tel)){
            // alert("手机号校验通过")
            document.getElementById("telMsg").textContent="正确"
        }else {
            count++;
            // alert("手机号校验失败")
        }

        //邮箱 qq号@qq.com   .cn
        //  w+@w+.(com|cn|com.cn)
        //w{1,}@w{1,}.(com|cn|com.cn)
        var email = document.getElementById("email").value;
        var emailReg = /^w+@w+.(com|cn|com.cn)$/;
        if (emailReg.test(email)){
            // alert("邮箱校验通过")
            document.getElementById("emailMsg").textContent="正确"
        }else {
            count++;
            // alert("邮箱校验失败")
        }

        //判断计数器
        if (count > 0){
            alert("请正确输入")
            return false;
        }else {
            alert("校验都通过")
            return true;
        }


    }
</script>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <form action="0000" onsubmit="return ck()">
 9     用户名：<input type="text" name="name" id="name"><span style="color: red" id="s1">3-20个字符，以字母开头</span><br>
10 密码：<input type="text" name="pass" id="pass" ><span style="color: red" id="s2">6-15个字符</span><br>
11 手机号：<input type="text" name="tel" id="tel" ><span style="color: red" id="s3">请输入合法的11位手机号</span><br>
12 邮箱：<input type="text" name="email" id="email" ><span style="color: red" id="s4">请输入合法的邮箱格式</span><br>
13 <input type="submit" value="提交">
14 </form>
15 <script>
16     function ck(){
17         var count=0;
18         var nameReg =/^[a-zA-Z]w{2,19}$/
19         var name=document.getElementById("name").value;
20         if (nameReg.test(name)){
21             document.getElementById("s1").textContent="正确";
22             document.getElementById("s1").style.color="green";
23         }else{
24             count++;
25             document.getElementById("s1").textContent="错误";
26         }
27 
28         var passReg=/^w{6,15}$/;
29         var pass=document.getElementById("pass").value;
30         if (passReg.test(pass)){
31             document.getElementById("s2").textContent="正确";
32             document.getElementById("s2").style.color="green";
33         }else{
34             count++;
35             document.getElementById("s2").textContent="错误";
36 
37         }
38 
39         var telReg=/^1d{10}$/;
40         var tel=document.getElementById("tel").value;
41         if (telReg.test(tel)){
42             document.getElementById("s3").textContent="正确";
43             document.getElementById("s3").style.color="green";
44         }else{
45             count++;
46             document.getElementById("s3").textContent="错误";
47 
48         }
49 
50         var emailReg=/^w+@w+.w+$/;
51         var email=document.getElementById("email").value;
52         if (emailReg.test(email)){
53             document.getElementById("s4").textContent="正确";
54             document.getElementById("s4").style.color="green";
55         }else{
56             count++;
57             document.getElementById("s4").textContent="错误";
58 
59         }
60         if (count==0){
61             return true;
62         }else {
63             return  false;
64         }
65 
66     }
67 
68 </script>
69 </body>
70 </html>

正则表达式
元字符：
d 代表匹配一个数字等价于[0-9]
w 代表匹配一个字符等价于[a-zA-Z0-9_]
量词:
+ 代表匹配至少一个等价于{1,}
* 代表匹配任意个等价于{0,}
? 代表匹配0个或者1个等价于{0,1}

{a,} 代表至少出现a个
{a,b} 至少出现a个，最多出现b个
{a} 必须出现a个
代表或： (|)

正则表达式.test(值)