javascript - form.checkValidity 检查两个密码字段是否匹配

Question

第一次发帖，请多多关照。我正在尝试自学如何为本地俱乐部编写响应式网站。有没有办法使用 bootstrap 4 表单验证方法检查两个密码字段是否相同并相应地出错？我可以在服务器端执行此操作，但由于我正在执行大量的客户端表单验证，如果我可以在提交表单之前检查密码是否相同，那就太好了。

<form class="container" id="form-validation" method="post" action="./register.php" novalidate>
<div class="row">
    <div class="col-md-10 mb-3">
        <label for="validation1">Username</label>
        <input type="text" class="form-control" name="username" id="validation1" placeholder="Username" required pattern="^[_a-zA-Z0-9\-]{5,15}$">
        <div class="invalid-feedback">
            Must be alpha-numeric, dash or underscore, between 5 & 15 characters
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-10 mb-3">
        <label for="validation2">Password</label>
        <input type="password" class="form-control" name="pwd1" id="validation2" placeholder="Password" required pattern="^[_a-zA-Z0-9\-]{5,15}$">
        <div class="invalid-feedback">
            Must be alpha-numeric, dash or underscore, between 5 & 15 characters
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-10 mb-3">
        <label for="validation3">Confirm Password</label>
        <input type="password" class="form-control" name="pwd2" id="validation3" placeholder="Re-enter Password" required pattern="^[_a-zA-Z0-9\-]{5,15}$">
        <div class="invalid-feedback">
            Must be alpha-numeric, dash or underscore, between 5 & 15 characters and match original Password
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-10 mb-3">
        <button class="btn btn-success" type="submit" value="Send" name="registerbtn">Register</button>
    </div>
</div>
</form>


(function() {
    "use strict";
    window.addEventListener("load", function() {
        var form = document.getElementById("form-validation");
        form.addEventListener("submit", function(event) {
            if (form.checkValidity() == false) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add("was-validated");
        }, false);
    }, false);
}());

Answer 1

使用它应该有效。

var form = document.getElementById("form-validation");
 form.addEventListener("submit", function(event) {          
      if ( document.getElementById("validation2").value != document.getElementById("validation3").value ) {
          alert("Password mismatch");
          event.preventDefault();
          event.stopPropagation();
      }
      else if (form.checkValidity() == false) {
          event.preventDefault();
          event.stopPropagation();
      }
      form.classList.add("was-validated");
    }, false);