正则运用

最新推荐文章于 2022-06-29 06:03:38 发布

维克多噗噗

最新推荐文章于 2022-06-29 06:03:38 发布

阅读量363

点赞数

分类专栏：知识点

知识点专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的表单验证示例，并提供了多种常见输入格式的正则表达式，包括身份证号、手机号、邮箱等。

常用的正则表达式自行百度.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei";}
        </style>
    </head>
<body>

<script type="text/javascript">
    //身份证正则表达式(18位)
    //IDCard = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0-2]\d)|3[0-1])\d{3}(\d|X)$/i;

    //汉字：^[\u4e00-\u9fa5]{0,}$


    // 邮编410000
    // var str = "512400";
    // var pattern = /^[1-9]\d{5}$/;
    // alert(pattern.test(str));

    //邮箱 1647090769@qq.com
    // var str = "1647090769@qq.com";
    // var str = "0aaa10123@qq.com";
    // var pattern = /^([^0]\w+)@(\w+)\.([a-zA-Z]+)/;
    // alert(pattern.test(str));
    //
    //手机 18819473436;
    // var str = "18819473436";
    // var pattern =  /^1[3578]\d{9}$/;
    // alert(pattern.test(str));

    //去头尾空格;
    // var str = " pr ";
    // var pattern = /^\s+|\s+$/g;//匹配前面或后面空格
    // str = str.replace(pattern,"");
    // alert(str);
    // alert(str.length);

    // 用户名 字母开头，允许5-16字节，允许字母数字下划线
    // var str = "adasd123";
    // var pattern = /^[a-zA-Z]\w{4,15}$/
    // alert(pattern.test(str));


</script>
</body>
</html>

表单的验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        #wrap{width:420px; height:520px; background:#00ccff; margin:0 auto; position:relative; }
        #wrap h1{height:40px; line-height:40px; color:#fff; font-size:18px; background:rgb(0,153,204);text-align: center; margin-bottom: 50px;}
        div{margin:10px 0; height:44px; overflow:hidden; transition:height 0.5s; }
        div.wrong{height:63px; }
        div.right input{border: 2px solid lightgreen; box-shadow: 0 0 5px lightgreen inset;}
        input{width:266px; height:40px; border:1px solid #ddd; outline:none; margin:0px auto; display:block; text-indent:10px; border-radius: 5px;}
        input+span{color:red; font-size:12px; width: 100%; display: block; text-align: center; padding: 5px;}
        .mail ul li {list-style:none; height:16px; font-size:12px; }
        .submit input{text-indent:0; color:#fff; font-size:18px; background:RGB(0,153,204); border:none; }
        #tip{background:rgba(0,0,0,.8); width:104px; height:40px; line-height:40px; color:#fff; font-size:14px; text-align:center; position:absolute; top:40%; left:50%; margin-top:-20px; margin-left:-52px; z-index:-1; opacity:0; transition:opacity .5s,top .5s; }
        #tip.show{top:50%; z-index:1; opacity:1; }
    </style>
</head>
<body>
    <div id="wrap">
        <h1>注册</h1>
        <div>
            <input type="text" class='match' name='user' placeholder='请输入用户名' />
            <span>字母开头,长度6-10位字母数字下划线</span>
        </div>
        <div>
            <input type="password" class='match' name='pwd' placeholder='请输入密码' />
            <span>字母数字长度6-18位</span>
        </div>
        <div>
            <input type="password" name='pwd2' placeholder='请再次输入密码' />
            <span>两次密码不一致</span>
        </div>
        <div>
            <input type="text" class='match' name="tel" placeholder='请输入电话' />
            <span>电话号码格式不正确</span>
        </div>
        <div>
            <input type="text" class='match' name="e-mail" placeholder='请输入e-mail' />
            <span>邮箱格式不正确</span>
        </div>
        <div>
            <input type="text" class='match' name="IDCard" placeholder='请输入身份证' />
            <span>证件格式不正确</span>
        </div>
        <div class='submit'>
            <input type="submit" value='注册' />
        </div>
        <p id='tip'>请先输入密码</p>
    </div>
    <script type="text/javascript">

        var pattern = {
            "user":/^[a-zA-Z_]\w{5,8}$/,
            "pwd":/^\w{6,12}$/,
            "tel":/^1[35678]\d{9}$/,
            "e-mail":/^([^0][\w]+)@([\w]+)\.([a-zA-Z]+)$/,
            "IDCard":/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0-2]\d)|3[0-1])\d{3}(\d|X)$/i
        };
        var inputDoms = document.getElementsByClassName("match");
        var pwd = document.getElementsByName("pwd")[0];
        var pwd2 = document.getElementsByName("pwd2")[0];
        for (var i = 0; i < inputDoms.length; i++) {
            inputDoms[i].onblur = function(){
                var val = this.value;
                if(val){
                    if(pattern[this.name].test(val)){//自身属性name储存
                        // 选择Div
                        this.parentNode.className = "right";
                    }else{
                        this.focus();
                        this.parentNode.className = "wrong";
                    };
                };
            };
        };

        // 密码
        var timer = null;
        pwd2.onfocus = function(){ //聚焦的时候
            var val = pwd.value;
            if(!val){  //密码为空的时候
                document.getElementById("tip").className = "show";
                pwd.focus();
                if(timer)clearTimeout(timer);
                timer = setTimeout(function(){
                    document.getElementById("tip").className = "";
                },1000);
            };
        };
        pwd2.onblur = function(){
            var val = pwd.value;
            if(val == this.value){
                this.parentNode.className = "right";
            }else{
                // this.focus();
                this.parentNode.className = "wrong";
            }
        }
    </script>
</body>
</html>