js基础之正则验证

最新推荐文章于 2023-08-28 16:57:31 发布
原创最新推荐文章于 2023-08-28 16:57:31 发布 · 897 阅读
0 ·
CC 4.0 BY-SA版权
js基础专栏收录该内容
15 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    body {
        background: #ccc;
    }

    label {
        width: 40px;
        display: inline-block;
    }

    .container {
        margin: 100px auto;
        width: 400px;
        padding: 50px;
        line-height: 40px;
        border: 1px solid #999;
        background: #efefef;
    }

    span {
        margin-left: 30px;
        font-size: 12px;
        padding:2px 20px 0;
        color: #ccc;
    }

    .wrong {

        color: red;
        background: url(images/error.png) no-repeat;
        
    }

    .right {
        color: green;
        background: url(images/right.png) no-repeat;
    }

    .pwd {
        width: 220px;
        height: 20px;
        background: url("images/strong.jpg") no-repeat;
    }
    .str1{
        background-position: 0 -20px;
    }
    .str2{
        background-position: 0 -40px;
    }
    .str3{
        background-position: 0 -60px;
    }
    .str4{
        background-position: 0 -80px;
    }
</style>
<body>
    <div class="container">
        <label>QQ</label><input type="text" id="inp1"><span>输入正确的QQ号码</span><br>
        <label>手机</label><input type="text" id="inp2"><span>输入13位手机号码</span><br>
        <label>邮箱</label><input type="text" id="inp3"><span>输入正确邮箱</span><br>
        <label>座机</label><input type="text" id="inp4"><span>输入您的座机</span><br>
        <label>账号</label><input type="text" id="inp5"><span>亲输入您的账号</span><br>
        <label>密码</label><input type="text" id="inp6"><span>请输入您的密码</span><br>
        <div id="password" class="pwd"></div>
    </div>


    <script>
        //需求：input中输入内容，失去焦点，进行判断。
        //     如果错误在后面的span中提示出来。正确也提示出来。

        //获取相关元素，一个一个绑定事件。(如果想要，可以自己封装)
        var inpArr = document.getElementsByTagName("input");
        var password = document.getElementById("password");

        //第一个：qq号
        fn(inpArr[0],/^[1-9][0-9]{4,10}$/);
        //第二个：手机号
        fn(inpArr[1],/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/);
        //第三个：邮箱号
        fn(inpArr[2],/^[\w\-\.]+\@[\w]+\.[\w]{2,4}$/);
        //第四个：座机号
        fn(inpArr[3],/^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/);
        //第五个：账号
        fn(inpArr[4],/^[a-zA-Z0-9_\-\$]{3,16}$/);



        //第六个：密码
        inpArr[5].onblur = function () {
            //写正则：/^[1-9][0-9]{4,}$/
            var reg1 = /^[\$\w\-]{6,18}$/;
            if(reg1.test(this.value)){
                //要给后面的span赋值，加类名。(right和wrong)
                this.nextSibling.className = "right";
                this.nextSibling.innerHTML = "恭喜您输入正确！";

                //密码强度：初始化值为1级难度；
                password.className = "pwd str1";
                        //根据难度不同在层叠...
                //从高往低判断：因为符合难的密码的同样符合简单。
                if(/^[A-Za-z0-9]+[_$]+[A-Za-z0-9]*$/.test(this.value)){
                    password.className = "pwd str4";
                }else if(/^([a-z].*[0-9])|([A-Z].*[0-9])|([0-9].*[a-zA-Z])$/.test(this.value)){
                    password.className = "pwd str3";
                }else if(/^([a-z].*[A-Z])|([A-Z].*[a-z])$/.test(this.value)){
                    password.className = "pwd str2";
                }
            }else{
                //要给后面的span赋值，加类名。(right和wrong)
                this.nextSibling.className = "wrong";
                this.nextSibling.innerHTML = "对不起，格式错误！";
            }
        }










        //方法封装
        function fn(ele,str){
            ele.onblur = function () {
                var reg = str;
                if(reg.test(this.value)){
                    //要给后面的span赋值，加类名。(right和wrong)
                    this.nextSibling.className = "right";
                    this.nextSibling.innerHTML = "恭喜您输入正确！";
                }else{
                    //要给后面的span赋值，加类名。(right和wrong)
                    this.nextSibling.className = "wrong";
                    this.nextSibling.innerHTML = "对不起，格式错误！";
                }
            }
        }




    </script>



</body>
</html>