javascript - 即使验证失败，表单也会提交

Question

我希望用户名和密码分别为admin和admin，以便成功提交表单。但即使用户名和密码与 admin 和 admin 不匹配，表单也会提交。

function validateOnSubmit() {

    console.log("Called!");
    var isValid = true;

    document.getElementById("alert").className = "";
    if (document.getElementById("login-password").value.length <= 4) {
        isValid = false;
        document.getElementById("alert").className = "doWiggle";
        setTimeout(function(){
            document.getElementById("alert").className = document.getElementById("alert").className.replace('doWiggle', '');
        }, 300);
    }else
    {
        if(document.getElementById("login-password").value != "admin" && document.getElementById("username").value != "admin") {
            alert("Wrong Password!");
            isValid = false;
        }
    }
    console.log(isValid);
    return isValid;
}

HTML

    <div class="container">
    <form action="home.html" id="login-form" method="post" onsubmit="return validateOnSubmit()">
    <p class="form-header">Sign In</p>
        <span>Username</span>
        <br/>
        <input type="text" name="username" id="username" autocomplete="off" required/>

        <br/>
        <br/>

        <span>Password</span>
        <br/>
        <input type="password" name="login-password" id="login-password" onkeyup="return validate()" required/>
        <p id="alert">Password should more than 4 characters!</p>
        <br/>
        <br/>

        <input type="checkbox" name="rememberMe" class="rememberMe" id="rememberMe"/>
        <label for="rememberMe">Remember Me</label>

        <br/>
        <br/>

        <input type="submit" id="submit" value="Sign In"/>
        <br>
        <br>
        <div id="options">
            <a href="register.html">Not registered ?</a>
        </div>
        <input type="hidden" name="operation" value="login">
    </form>
    </div>
    <script type="text/javascript" src="js/validate.js"></script>
</body>

Answer 1

您需要调用validateOnSubmit()的方式是这样吗:

<form onsubmit="return validateOnSubmit();">

注意 return关于onsubmit事件。最好的猜测是您会忘记 return关键字，这是不一样的，它提交 <form> .

我还看到您正在使用 className 。最好将其替换为 Element.classList :

element.classList.add(); // Similar to adding class.
element.classList.remove(); // Similar to removing class.

或者如果你想切换它，你可以使用:

element.classList.toggle();

逻辑

您使用的逻辑是错误的:

if (document.getElementById("login-password").value != "admin" && document.getElementById("username").value != "admin") {

上面的逻辑是行不通的。使用以下内容:

if (document.getElementById("login-password").value != "admin" || document.getElementById("username").value != "admin") {

应该是||运营商在这里。目前，如果 username 中的任何一个或password是对的，那么表单就提交了，这是错误的。