zoukankan      html  css  js  c++  java
  • 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>       
  • 相关阅读:
    Code Forces Gym 100886J Sockets(二分)
    CSU 1092 Barricade
    CodeChef Mahesh and his lost array
    CodeChef Gcd Queries
    CodeChef GCD2
    CodeChef Sereja and LCM(矩阵快速幂)
    CodeChef Sereja and GCD
    CodeChef Little Elephant and Balance
    CodeChef Count Substrings
    hdu 4001 To Miss Our Children Time( sort + DP )
  • 原文地址:https://www.cnblogs.com/dee0912/p/4472776.html
Copyright © 2011-2022 走看看