正则验证简单运用(含模态框)_uni.showmodal加输入校验-优快云博客

本文链接：https://blog.youkuaiyun.com/Insomnia_again/article/details/122385806

正则验证在我们的生活当中运用的非常多,比如注册的时候,用户名或者密码输入是否符合标准,这都需要正则验证来判定,现在就用一个小demo来运用正则验证,简单的进行对用户输入的内容进行验证.

css样式及html

<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>


```<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>
    <!-- 最外层大盒子 -->

js代码部分

                                                                            //js代码部分
    <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>