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

更改

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

到

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

Answer 2

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

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

2 个答案: