正则验证&模态框

在日常生活中,凡是需要表单验证的都会用到正则验证.下面拿一个简单的带有模态框的正则验证的小demo看一下

    <style>

        /* 遮罩层 */

        .mask{

            position: fixed;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            background-color: rgba(0,0,0,0.5);

            display: none;

            /* display: flex; */

            /* flex-direction: column; */

            justify-content: space-around;

            align-items: center;

            flex: 1;

        }

        .con {

            width: 450px;

            height: 404px;

            /* border: 1px solid; */

            background-color: #fff;

        }

        .title {

            height:40px;

            width: 450px;

            color: #db6419;

            border-bottom: 3px solid orange;

           

        }

        .title p{

            text-align: center;

            line-height: 40px;

            font-weight: 700;

            font-size: 18px;

        }

        .form input {

            width: 405px;

            height: 30px;

            text-indent: 1em;

            border-radius: 10px;

            border: #8d898a 1px solid;

        }

        .form input,

        p {

            margin-top: 0;

            margin-left: 25px;

            margin-top: 15px;

        }

        .con button {

            width: 114px;

            height: 40px;

            outline: none;

            border: none;

            justify-content: space-around;

        }

        .con p {

            font-size: 12px;

            color: #8d898a;

        }

        /* 按钮 */

        .btn{

            display: flex;

            justify-content: space-around;

            cursor: pointer;

        }

        .btn .close{

            background-color: #8b898a;

            border-radius: 15px;

        }

        .btn .login{

            background-color: orange;

            color: #fff;

            border-radius: 15px;

        }

    </style>

</head>

<body>

    <!-- 注册按钮 -->

    <button id="submitBtn">注册</button>

    <!-- 模态框 -->

    <div class="mask">

        <div class="con">

            <!-- 标题 -->

            <div class="title">

                <p>用户注册</p>

            </div>

            <!-- 表单-->

            <div class="form">

                <input class="username" type="text" placeholder="请输入用户名">

                <p>中文、字母、数字、下划线长度2-12位</p>

                <input class="email" type="email" name="" id="" placeholder="请输入邮箱">

                <p>有效的邮箱</p>

                <input class="password" type="password" name="" id="" placeholder="请输入密码">

                <p>字母、数字、下划线长度6-12位</p>

            </div>

            <!-- 按钮 -->

            <div class="btn">

                <button class="close">关闭</button>

                <button class="login">注册</button>

            </div>

        </div>

    </div>

    <!-- 最外层大盒子 -->

    <script>

        // 获取元素

        let submitBtn = document.querySelector('#submitBtn')

        let mask = document.querySelector('.mask')

        // 关闭按钮

        let close = document.querySelector('.btn .close')

        // 注册按钮

        let login = document.querySelector('.btn .login')

        // 用户名

        let username = document.querySelector('.form .username')

        let email = document.querySelector('.form .email')

        let password = document.querySelector('.form .password')

        let ps = document.querySelectorAll('.form p')

        // 正则

        let useReg =  /^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$/

        let emaReg =  /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

        let psdReg = /^[a-zA-Z]\w{5,17}$/

        // 记录是否符合正则

        let useFlag = false

        let emaFlag = false

        let psdFlag = false

        // 给按钮注册点击事件

        submitBtn.addEventListener('click',function(){

            mask.style.display = "flex"

        })

        // 关闭按钮点击的时候 关闭模态框

        close.addEventListener('click',function(){

            mask.style.display="none"

        })

       

        // 遍历所有的正则验证的提示文字

        ps.forEach(function(p,index){

            // 用户名的input框注册失焦事件

            username.addEventListener('blur',function(){

                if(useReg.test(this.value)){

                    console.log(this.value);

                    ps[0].style.color="#8b898a"

                    useFlag = true

                }else{

                    ps[0].style.color="red"

                    console.log(ps[index]);

                    useFlag = false

                }

        })

        // 邮箱input框的失焦事件

        email.addEventListener('blur',function(){

                if(emaReg.test(this.value)){

                    console.log(this.value);

                    ps[1].style.color="#8b898a"

                    emaFlag = true

                }else{

                    ps[1].style.color="red"

                    emaFlag = false

                }

        })

        })

       

        // 密码的input输入框的失焦事件

        password.addEventListener('blur',function(){

            if(psdReg.test(this.value)){

                ps[2].style.color="#8b898a"

                psdFlag = true

            }else{

                ps[2].style.color="red"

                psdFlag = false

            }

        })

        //登陆

        login.addEventListener('click',function(){

            if(useFlag&&emaFlag&&psdFlag){

                location.href='https:www.baidu.com'

            }else{

                alert('请输入正确的格式')

            }

        })

    </script>

</body>

</html>