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

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 语句，然后包含一个处理程序，用于 return 在字段输入正确时使其正常：

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!");

您只需在所有语句之后放置警报 - 只要 none 个条件失败，它就会执行，因此 return.

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

Remove form error with correct input

javascript

forms

passwords

input