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>       
  • 相关阅读:
    python字符串以单词形式反转
    python if 语句的练习
    Python对元祖的操作
    Python对列表的操作
    Python对字符串的操作
    导出EXCEL【Web方式HTML通过拼接html中table】
    链接点击跳动问题
    maven报uri is not registered错误
    maven配置
    三级分类的sql语句
  • 原文地址:https://www.cnblogs.com/dee0912/p/4472776.html
Copyright © 2011-2022 走看看