javascript - 写入时验证输入字段

Question

当有人在字段中输入时，我可以隐藏验证错误吗？ (不聚焦，仅在输入中输入更多字母时)。

我目前有这个代码:

 <div>
  Email:
  <input type="text" name="email" id="txtEmail" onblur="validateForm()">
  <label id="lblError" style="color:red"></label>
  </div>

还有这个 JavaScript:

function validateForm() {
     var x = document.getElementById("txtEmail").value;
     var atpos = x.indexOf("@");
     var dotpos = x.lastIndexOf(".");
     if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {


         document.getElementById("lblError").innerHTML = "Enter valid email Address";
     }
     else {
         document.getElementById("lblError").innerHTML = "";
     }
 }

它的作用是在输入字段失去焦点时验证我的电子邮件输入。然而，当有人再次集中注意力并写更多的字母时，我希望它能够隐藏错误。就像这个网站一样:https://www.cosstores.com/en_dkk/login

这可以用 jquery 或 javacript 实现吗？

Answer 1

我相信您正在寻找焦点事件。

<div>
  <label for="txtEmail">Email:</label>
  <input type="text" name="email" id="txtEmail" onblur="validateForm()" onkeypress="clearErrMsg()">
  <label id="lblError" style="color:red"></label>
</div>

  function validateForm() {
    var x = document.getElementById("txtEmail").value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
      document.getElementById("lblError").innerHTML = "Enter valid email Address";
    } else {
      document.getElementById("lblError").innerHTML = "";
    }
  }

  function clearErrMsg() {
    document.getElementById("lblError").innerHTML = "";
  }