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() == "") {&nbsp; &nbsp; email.style.border = "solid 1px red"&nbsp; &nbsp; document.getElementById("lblemail").style.visibility="visible";&nbsp; &nbsp; return false;} else {&nbsp; &nbsp; email.style.border = "none"&nbsp; &nbsp; document.getElementById("lblemail").style.visibility="hidden";&nbsp; return true;&nbsp;}

Answer 3

我认为你可以使用事件侦听器，这应该可行var email = document.getElementById("email");email.addEventListener('change', () => {&nbsp;if (email.value.trim() == "") {&nbsp; &nbsp; &nbsp;email.style.border = "solid 1px red"&nbsp; &nbsp; &nbsp;document.getElementById("lblemail").style.visibility="visible";&nbsp; &nbsp; &nbsp;return false;&nbsp;} else {&nbsp; &nbsp;email.style.border = none;&nbsp; &nbsp;document.getElementById("lblemail").style.visibility="visible";&nbsp; &nbsp;return true; }})