JS 正则表达式 —— 注册

需求:

• 1. 用户名以数字或字母开头, 6~11位;
• 2. 密码 6~12 位数字字母下划线;
• 3. 手机号 11 位数字

逻辑：

• 1.获取到用户名 密码 手机号

• 2.根据正则匹配是否符合规则，决定是否渲染对应的span标签

html

    <form>
        <label>
            用户名: <input autocomplete="off" type="text" class="name">
            <span class="nameText">请按照规则填写用户名</span>
        </label>
        <label>
            密码: <input autocomplete="off" type="text" class="password">
            <span class="passwordText">请按照规则填写密码</span>
        </label>
        <label>
            手机号: <input autocomplete="off" type="text" class="phone">
            <span class="phoneText">请按照规则填写手机号</span>
        </label>
        <button>注册</button>
    </form>

css

        * {
            margin: 0;
            padding: 0;
        }

        form {
            width: 500px;
            padding: 30px;
            border: 5px solid pink;
            border-radius: 15px;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
        }

        form>label {
            height: 50px;
            position: relative;
        }

        form>label>span {
            color: red;
            position: absolute;
            left: 20px;
            bottom: 5px;

            display: none;
        }

js

利用循环简化代码量

        let inps = [...document.querySelectorAll('input')]
        // 0.创建正则
        let reg = {
            name: /^[0-9a-zA-Z]\w{5,10}$/,
            password: /^\w{6,12}$/,
            phone: /^\d{11}$/
        }

        inps.forEach((item) => {
            item.onblur = function () {
                // 1.拿到用户输入的内容
                let value = this.value
                // 2.想办法拿到正则
                let fnReg = reg[this.className]
                // 3.通过正则验证输入的内容是否符合正则规则
                if (fnReg.test(value)) {
                    // 如果当前分支执行，说明符合规则
                    this.nextElementSibling.style.display = 'none'
                } else {
                    // 当前分支执行，说明不符合规则
                    this.nextElementSibling.style.display = 'block'
                }

            }
        })

普通写法

        let inps = [...document.querySelectorAll('input')]
        //验证用户名
        inps[0].onblur = function (e) {
            // console.log('失去焦点1')
            // 1.1拿到用户名
            let value = e.target.value
            // 1.2创建一个正则
            let reg = /^[0-9a-zA-Z]\w{5,10}$/
            // 1.3通过正则判断用户名是否符合规则
            console.log(reg.test(value))
            if (reg.test(value)) {
                // 如果当前分支执行，说明符合规则
                e.target.nextElementSibling.style.display = 'none'
            } else {
                // 当前分支执行，说明不符合规则
                // console.log(e.target)
                e.target.nextElementSibling.style.display = 'block'
            }
        }

        //2.验证密码
        inps[1].onblur = function (e) {
            // console.log('失去焦点2')
            // 2.1拿到密码
            let value = e.target.value
            // 2.2创建一个正则
            let reg = /^\w{6,12}$/
            // 2.3通过正则判断用户名是否符合规则
            if (reg.test(value)) {
                // 如果当前分支执行，说明符合规则
                e.target.nextElementSibling.style.display = 'none'
            } else {
                // 当前分支执行，说明不符合规则
                e.target.nextElementSibling.style.display = 'block'
            }
        }

        //3.验证手机号
        inps[2].onblur = function (e) {
            // console.log('失去焦点3')
            // 3.1拿到手机号
            let value = e.target.value
            // 3.2创建一个正则
            let reg = /^\d{11}$/
            // 3.3通过正则判断手机号是否符合规则
            if (reg.test(value)) {
                // 如果当前分支执行，说明符合规则
                e.target.nextElementSibling.style.display = 'none'
            } else {
                // 当前分支执行，说明不符合规则
                e.target.nextElementSibling.style.display = 'block'
            }
        }