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

我正在尝试使用javascript验证表单，但是如果脚本中没有包含查看密码（login_pass）的if语句，但添加的内容不起作用，我可以更改边框颜色。我也提到了引导表单验证，但不理解为什么在添加带有login\u 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>

改变

到

---

除了密码字段的

id

中的输入错误，您还可以在语法中使用，如下面的示例所示。最好处理输入错误，例如模式不匹配错误

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

var login_pass = document.getElementById('login_pass');

var login_pass = document.getElementById('login_password');

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