JavaScript 中的验证 - 如何使红色边框消失？

Question

目前，当字段为空且无效时，该字段将变为红色并显示描述文本。但是，当用户正确填写字段时，如何使字段和文本消失呢？HTML 中的代码：<label for="email"><b>Email</b></label>        <label id="lblemail" style="color: red; visibility: hidden; float: right;">Invalid email</label><br>        <input type="text" placeholder="Enter Email" name="email" id="email"><br>JS 代码：var email = document.getElementById("email");if (email.value.trim() == "") {    email.style.border = "solid 1px red"    document.getElementById("lblemail").style.visibility="visible";    return false;} else {  return true; }

Answer 1

您应该在输入事件上添加事件侦听器：

const email = document.getElementById('email');

const label =  document.getElementById('lblemail');

email.addEventListener('input', function(e) {

  if (!e.target.value.trim()) {

    email.style.border = 'solid 1px red';

    label.style.visibility = 'visible';

  } else {

    email.style.border = 'solid 1px black';

    label.style.visibility = 'hidden';

  }

})

最好使用输入事件，因为它会在每次更改输入时检查输入

Answer 2

我认为你可以使用js代码取消设置

var email = document.getElementById("email");

if (email.value.trim() == "") {

    email.style.border = "solid 1px red"

    document.getElementById("lblemail").style.visibility="visible";

    return false;

} else {

    email.style.border = "none"

    document.getElementById("lblemail").style.visibility="hidden";

  return true; 

}

Answer 3

我认为你可以使用事件侦听器，这应该可行

var email = document.getElementById("email");

email.addEventListener('change', () => {

 if (email.value.trim() == "") {

     email.style.border = "solid 1px red"

     document.getElementById("lblemail").style.visibility="visible";

     return false;

 } else {

   email.style.border = none;

   document.getElementById("lblemail").style.visibility="visible";

   return true; }

})