使用正确的输入删除表单错误

Question

我刚刚制作了一个注册表，如果出现问题，它会用红色 (CSS) 字母告诉您。但是，我希望一旦用户正确写入该文本，该文本就会消失。我该怎么做？

<script>
    function validateForm2() {
        var usrnm2 = document.getElementById("usrnm2").value;
        var passw2 = document.getElementById("passw2").value;
        var cnfpassw2 = document.getElementById("cnfpassw2").value;
        var age = document.getElementById("age").value;

        if (usrnm2 == null || usrnm2 == "") {
            document.getElementById("error1").innerHTML = "You must enter a username";
            return false;
    }
        else if (passw2 == null || passw2 == "") {
            document.getElementById("error2").innerHTML = "You must enter a password";
            return false;
    }
        else if (cnfpassw2 !== passw2) {
            document.getElementById("error3").innerHTML = "Password does not match";
            return false;
    }
        else if (age < 18) {
            document.getElementById("error4").innerHTML = "You are not old enough to enter this site"
            return false;
    }
        else {
            alert("Congratulations, you have registered successfully!")
    }
    }
</script>
<script>
    function register2() {
        validateForm2()
    }
</script>
<form>
    Username:
    <input id="usrnm2" type="text" name="username"><p id="error1"></p>
    Password
    <input id="passw2" type="password" name="password"><p id="error2"></p>
    Confirm Password
    <input id="cnfpassw2" type="password" name="confirmpw2"><p id="error3"></p>
    Age
    <input id="age" type="number" name="age"><p id="error4"></p><br />
    <input id="bttn2" type="button" value="Register!" onclick="register2()"><br />
</form>

Answer 1

将验证条件分成单个块if 语句，然后包含一个处理程序，用于在正确输入字段时使其恢复正常：

if (field is entered incorrectly) {
    document.getElementById("error").innerHTML = "You must enter correctly";
    return false;
}
else {
    document.getElementById("error").innerHTML = "";
}

...

alert("Congratulations, you have registered successfully!");

您只需在所有语句之后放置警报 - 只要没有任何条件失败并因此返回，它就会执行。