javascript - 检查密码时的表单验证无效

Question

我正在尝试使用 javascript 验证表单，但当查看密码 (login_pass) 的 if 语句未包含在脚本中时我可以更改边框颜色，但添加时没有任何效果。我也提到了 Bootstrap 表单验证，但无法理解为什么当我添加带有 login_pass 的第二个 if 语句时没有任何效果。

这是表单 html:

<form id="needs-validation" name="account" action="" method="POST" novalidate>
    <div class="form-group" style="margin: auto;">
        <label for="user">User Name</label>
        <input id="login_uname" type="text" class="form-control" placeholder="User Name" value="" name="user" required>
    </div>
    <div class="form-group" style="margin: auto;">
        <label for="pwd">Password</label>
        <input id="login_password" type="password" class="form-control" placeholder="Password" value="" name="pwd" required>
    </div>
        <button id="login_submit" style="margin-right: 10%; float: right;" type="submit" class="btn btn-default">Log In</button>
</form>

这是我的javascript:

var form = document.getElementById('needs-validation');
var login_user = document.getElementById('login_uname');
var login_pass = document.getElementById('login_pass');

form.addEventListener('submit', function(event) {
  if (form.checkValidity() === false) {
    if(login_user.value === "") {
      login_user.style.borderColor = 'red';
    } else {
      login_user.style.borderColor = 'green';
    }
    if(login_pass.value === "") {
      login_pass.style.borderColor = 'red';
    } else {
      login_pass.style.borderColor = 'green';
    }
    event.preventDefault();
    event.stopPropagation();
  } else {
    form.classList.add('was-validated');
  }
}, false);

Answer 1

除了密码字段的 id 中的拼写错误外，您还可以使用 ValidityState在您的语法中，如下例所示。处理输入错误会更好，例如模式不匹配错误。

var form = document.getElementById('needs-validation');
var login_user = document.getElementById('login_uname');
var login_pass = document.getElementById('login_password');

form.addEventListener('submit', function(event) {
  if (form.checkValidity() === false) {
    if (login_user.validity.valueMissing) {
      login_user.style.borderColor = 'red';
    } else {
      login_user.style.borderColor = 'green';
    }          
    if(login_pass.validity.valueMissing) {
      login_pass.style.borderColor = 'red';
    } else {
      login_pass.style.borderColor = 'green';
    }
    event.preventDefault();
    event.stopPropagation();
  } else {
    form.classList.add('was-validated');
  }
}, false);