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。

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

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