表单登陆验证框

    科技2022-07-12  117

    JS实现对登陆界面表单输入内容的验证,借助正则表达式实现

    实现效果HTMLJS

    实现效果

    HTML

    <!-- 验证登陆信息S --> <div class="login_container"> <h1>验证表单中信息是否正确</h1> <label for="">QQ</label><input type="text" name="" id="inp1" /><span></span><br> <label for="">手机</label><input type="text" name="" id="inp2" /><span></span><br> <label for="">邮箱</label><input type="text" name="" id="inp3" /><span></span><br> <label for="">座机</label><input type="text" name="" id="inp4" /><span></span><br> <label for="">姓名</label><input type="text" name="" id="inp5" /><span></span><br> </div> <!-- 验证登陆信息E -->

    JS

    // 验证登陆信息S var inpQQ = document.getElementById("inp1"); var inpMobile = document.getElementById("inp2"); var inpEmail = document.getElementById("inp3"); var inpTel = document.getElementById("inp4"); var inpName = document.getElementById("inp5"); // 规律 var regName = /^[\u4e00-\u9fa5]{2,6}$/; var regMobile = /^\d{11}$/; var regTel = /^0\d{2,3}-\d{7,8}$/; var regQQ = /^[1-9]\d{4,10}$/; var regEmail = /^\w+@\w+\.\w+$/; // 绑定事件 check(inpName, regName); check(inpTel, regTel); check(inpQQ, regQQ); check(inpMobile, regMobile); check(inpEmail, regEmail); function check(inp, regEx) { inp.onblur = function () { var regName = /^[\u4e00-\u9fa5]{2,6}$/; if (regEx.test(this.value)) { this.nextSibling.innerHTML = "正确"; this.nextSibling.className = "right"; } else { this.nextSibling.innerHTML = "错误"; this.nextSibling.className = "wrong"; } }; } // 验证登陆信息E
    Processed: 0.010, SQL: 8