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

Working fiddle .

您只是在 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>