JavaScript-如何隐藏表单验证中的错误

当用户在我的表单上更正错误时，如何隐藏错误消息和红色边框？此时，它将一直显示错误，直到刷新或提交页面

function checkForm() {
            var valid = true;

            if (!retext.test(document.myform.textfield.value)) {
                document.myform.textfield.style.border = "3.5px solid red";
                document.getElementById("text").innerHTML = "Invalid text.";
                document.getElementById("text").style.display = "block";
                valid = false;
            }

            if (!re.test(document.myform.email.value)) {
                document.myform.email.style.border = "3.5px solid red";
                document.getElementById("emailwarn").innerHTML = "Invalid email.";
                document.getElementById("emailwarn").style.display = "block";
                valid = false;
            }

            if (!retel.test(document.myform.tel.value)) {
                document.myform.tel.style.border = "3.5px solid red";
                document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
                document.getElementById("telwarn").style.display = "block";
                valid = false;
            }

            return valid;
        }

---

我真的不知道怎么做。

只需添加代码，清除

checkForm（）函数开头的错误消息

在当前代码中，如果错误消息在没有机会在正确的输入上更改时被设置

比如说,

function clearErrors() {
  document.getElementById("text").style.display      = "none";
  document.getElementById("emailwarn").style.display = "none";
  document.getElementById("telwarn").style.display   = "none";
}

function checkForm() {      
  var valid = true;

  clearErrors();

  ...

假设每次修改表单时都会调用
checkForm
函数，则可以包含else子句来重置警告的样式和可见状态

function checkForm() {
    var valid = true;

    if (!retext.test(document.myform.textfield.value)) {
        document.myform.textfield.border = "3.5px solid red";
        document.getElementById("text").innerHTML = "Invalid text.";
        document.getElementById("text").style.display = "block";
        valid = false;
    } else {
        document.myform.textfield.border = 0;
        document.getElementById("text").style.display = "none";
    }

    if (!re.test(document.myform.email.value)) {
        document.myform.email.style.border = "3.5px solid red";
        document.getElementById("emailwarn").innerHTML = "Invalid email.";
        document.getElementById("emailwarn").style.display = "block";
        valid = false;
    } else {
        document.myform.email.border = 0;
        document.getElementById("emailwarn").style.display = "none";
    }

    if (!retel.test(document.myform.tel.value)) {
        document.myform.tel.style.border = "3.5px solid red";
        document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
        document.getElementById("telwarn").style.display = "block";
        valid = false;
    } else {
        document.myform.tel.border = 0;
        document.getElementById("telwarn").style.display = "none";
    }

    return valid;
}

首先，最好通过应用类来分离javascript和CSS样式：

input.error {
  border: 3.5px solid red;
}

要应用样式，请执行以下操作：

document.myform.textfield.classList.add("error");

document.myform.textfield.classList.remove("error");

要删除样式，请执行以下操作：

document.myform.textfield.classList.add("error");

document.myform.textfield.classList.remove("error");

要隐藏警告元素，请使用：

document.getElementById("telwarn").style.display = "none";

注意，ie<10
不适用于你到底想要什么？即使输入了错误的数据，边框也会是红色的，但这不会阻止您下一步（处理页面）。@JDeveloper如果将
checkForm（）
用作表单提交事件处理程序的默认条件，它也会出现。目前，我使用
调用了函数。。。onsubmit=“return checkForm（）”>
。修改表单时如何调用函数？我想您会这样做-谢谢，目前我正在使用
onsubmit
和
onchange
。为帮助干杯！