Javascript 正在验证多个输入

我在验证Submit上的多个输入时遇到问题

验证（以及在编辑输入时清除验证错误onkeyup）仅适用于第一个输入

我假设你不可能像我一样有很多

if

语句，但我无法确定它应该如何编写，以便验证提交的所有3个输入。它们应该是独立的功能吗？我尝试了多个onsubmit函数，但再次失败

JS

HTML

!
!               
!              
提交

只要稍微修改一下if语句中的流即可

设置有效的标志（最初为

true

），然后在每个条件下，如果验证失败，将标志修改为

false

。然后在if条件结束时返回标志一次

这样，如果元素无效，所有元素都可以获得分配给它们的相关类

注意：我改进了代码，以“重置”错误状态，如果用户提交-有2个错误，修复一个-这样“修复”的错误状态将不再存在

theForm.onsubmit = function() {
    // Set initial "valid" state flag
    var valid = true;

    // reset all "error" styles / messages
    errorUsername.style.display = 'none';
    usernameInput.className = 'form__input rounded-4';

    errorPassword.style.display = 'none';
    passwordInput.className = 'form__input rounded-4';

    errorEmail.style.display = 'none';
    emailInput.className = 'form__input rounded-4';

    // Now check the form and assign error styles as appropriate
    //Check for username
    if (usernameInput.value.length === 0) {
        errorUsername.style.display = 'block';
        usernameInput.className = 'form__input form__input--red rounded-4';
        valid = false;
    } 

    //Check for password
    if (passwordInput.value.length === 0) {
        errorPassword.style.display = 'block';
        passwordInput.className = 'form__input form__input--red rounded-4';
        valid = false;
    }

    //Check for email
    if (emailInput.value.length === 0) {
        errorEmail.style.display = 'block';
        emailInput.className = 'form__input form__input--red rounded-4';
        valid = false;
    }  

    return valid;
};  

---

在准备好之前，不要从onsubmit处理程序返回true或false值。验证所有内容，然后返回您的布尔值。您给出的解释可能比代码修复更有帮助，因为您可以告诉我，我仍然在学习js，并且您的代码内注释现在对我来说很有意义，非常感谢您的帮助。这通常是一个担心，我会得到一个解决方案，但不会真正理解：）你的补充，我甚至没有考虑自己，谢谢你。我喜欢两者都提供——因此“概念”被解释（和推理），但您也可以在代码中“实践中”看到它。有时解释并不完全正确，有时代码可能会令人困惑！

<form name="contact" action="#" novalidate>
            <div class="input__holder">
                <input id="username" name="username" type="text" class="form__input rounded-4" placeholder="Username">
                <div id="username-error" class="input__error">!</div>
            </div>
            <div class="input__holder">
                <input id="password" name="password" type="password" class="form__input rounded-4" placeholder="Password">
                <div id="password-error" class="input__error">!</div>               
            </div>      
            <div class="input__holder">     
                <input id="email" name="email" type="text" class="form__input rounded-4" placeholder="E-mail">
                <div id="email-error" class="input__error">!</div>              
            </div>
            <button type="submit" id="" class="submit-button rounded-4">Submit</button>
        </form>

theForm.onsubmit = function() {
    // Set initial "valid" state flag
    var valid = true;

    // reset all "error" styles / messages
    errorUsername.style.display = 'none';
    usernameInput.className = 'form__input rounded-4';

    errorPassword.style.display = 'none';
    passwordInput.className = 'form__input rounded-4';

    errorEmail.style.display = 'none';
    emailInput.className = 'form__input rounded-4';

    // Now check the form and assign error styles as appropriate
    //Check for username
    if (usernameInput.value.length === 0) {
        errorUsername.style.display = 'block';
        usernameInput.className = 'form__input form__input--red rounded-4';
        valid = false;
    } 

    //Check for password
    if (passwordInput.value.length === 0) {
        errorPassword.style.display = 'block';
        passwordInput.className = 'form__input form__input--red rounded-4';
        valid = false;
    }

    //Check for email
    if (emailInput.value.length === 0) {
        errorEmail.style.display = 'block';
        emailInput.className = 'form__input form__input--red rounded-4';
        valid = false;
    }  

    return valid;
};