1.需求

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

2.逻辑

首先获取到用户名密码手机号
然后根据正则匹配输入的值是否符合规则来决定是否渲染对应的 span 标签

3.代码

//html和 css代码
    <form>
        <label>
            用户名: <input autocomplete="off" type="text" class="name">
            <span class="err">请按照规则填写用户名</span>
        </label>
        <label>
            密码: <input autocomplete="off" type="text" class="password">
            <span class="err1">请按照规则填写密码</span>
        </label>
        <label>
            手机号: <input autocomplete="off" type="text" class="phone">
            <span class="err2">请按照规则填写手机号</span>
        </label>
        <button>注册</button>
    </form>
    
    <style>
        * {
            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;
        }
    </style>

普通版本

//普通版本
//0.获取所有的input
let inps = [...document.querySelectorAll('input')]

//1.验证用户名
inps[0].onblur = function(e){
    //1.1拿到用户名
    let value = e.target.value
    //1.2创建一个正则
    let reg = /^[0-9a-zA-Z]\w{5,10}$/
    //1.3通过正则判断用户名是否符合规则
    if(reg.test(value)){
        e.target.nextElementSibling.style.display = 'none'
    }else{
        e.target.nextElementSibling.style.display = 'block'
    }
}

//2.验证密码
inps[1].onblur = function(e){
    //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){
    //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'
    }
}

简化版本

//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[item.className]
        //3.通过正则判断用户输入的值是否符合规则
        if(fnReg.test(value)){
            this.nextElementSibling.style.display = 'none'
        }else{
            this.nextElementSibling.style.display = 'block'
        }
    }
})

JS 用户登录注册案例

1.需求

2.逻辑

3.代码