表单登陆验证框

实现效果

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