HTML表单JS验证

Question

我正在尝试验证我的登录表单，以便在将值发布到我的PHP文件之前，该字段具有最小/最大长度。

JavaScript的：

function loginValidation() {
    var user = document.login.username.value;
    var pass = document.login.password.value;

    if (user.length <= 6 || user.length > 20) {
        alert("Please make sure the username is between 7 and 20 characters.");
        return false;
    }

    if (pass.length <= 8 || pass.length > 50) {
        alert("Please make sure the password field is between 9 and 50 characters.");
        return false;
    }
}

HTML：

<form name="login" onsubmit="loginValidation()" action="login.php" method="post">
    <div class="form-group row">
        <label for="username" class="lead para col-sm-4">Username</label>
        <input type="text" class="form-control transparent col-sm" id="username" name="username" placeholder="Username">
    </div>
    <div class="form-group row">
        <label for="password" class="lead para col-sm-4">Password</label>
        <input type="password" class="form-control col-sm" id="password" name="password" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-outline-primary">LOGIN</button>
</form>

似乎代码忽略了该功能或它不起作用（可能是错误？）。

其他可能有用的信息是具有我所有功能的JavaScript文件是外部的。

<script src="/JS/functions.js"></script>

Answer 1

工作提琴 。

您只是在onsubmit缺少函数调用中的return ，应该像这样：

<form name="login" onsubmit="return loginValidation()" action="login.php" method="post">
_____________________________^^^^^^

最好将事件附加到您的JS部分中：

document.querySelector('form[name="login"]').addEventListener("submit", loginValidation);

 function loginValidation() { var user = document.login.username.value; var pass = document.login.password.value; if (user.length <= 6 || user.length > 20) { alert("Please make sure the username is between 7 and 20 characters."); return false; } if (pass.length <= 8 || pass.length > 50) { alert("Please make sure the password field is between 9 and 50 characters."); return false; } return true; } 

 <form name="login" onsubmit="return loginValidation()" action="login.php" method="post"> <div class="form-group row"> <label for="username" class="lead para col-sm-4">Username</label> <input type="text" class="form-control transparent col-sm" id="username" name="username" placeholder="Username"> </div> <div class="form-group row"> <label for="password" class="lead para col-sm-4">Password</label> <input type="password" class="form-control col-sm" id="password" name="password" placeholder="Password"> </div> <button type="submit" class="btn btn-outline-primary">LOGIN</button> </form>