Javascript HTML表单JS验证

我正在尝试验证我的登录表单，以便在将值发布到我的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;
    }
}

<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>

函数loginValidation（）{
var user=document.login.username.value；
var pass=document.login.password.value；
if（user.length 20）{
警告（“请确保用户名在7到20个字符之间。”）；
返回false；
}
如果（通过长度50）{
警报（“请确保密码字段在9到50个字符之间。”）；
返回false；
}
}

HTML:

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;
    }
}

<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>

您的

onsubmit

中的函数调用中缺少了

返回

，如下所示：

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

函数loginValidation（）{
var user=document.login.username.value；
var pass=document.login.password.value；
if（user.length 20）{
警告（“请确保用户名在7到20个字符之间。”）；
返回false；
}
如果（通过长度50）{
警报（“请确保密码字段在9到50个字符之间。”）；
返回false；
}
返回true；
}

用户名
密码
登录

我试过使用和不使用它，两种方法都不起作用。它只是跳过JavaScript代码，就好像它不在那里一样。应该可以工作，检查fiddle Ahh，是的，它只在HTML页面（内联JavaScript）中使用该函数时工作，但在使用外部文件时不工作（无论如何要解决这个问题？也谢谢你的解决方案。什么？不-我从来没有在html页面中内联javascript，我的验证工作也很好…但我也从来没有内联事件处理程序，比如

onsubmit=“…”

，我总是附加事件处理程序：

元素。addEventListener（“提交”…）

@StephenP note是正确的，最好在JS中附加事件，检查我的更新..不确定您是否知道，但您可以在HTML输入上使用

minlength

和

maxlength

属性为您执行此类操作，而不是使用JS：