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

第一个帖子在这里，所以请温柔。我正在努力自学如何为当地俱乐部编写一个响应性强的网站。是否有任何方法可以使用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);
}());

用户名
必须是字母数字、破折号或下划线，介于5到15个字符之间
密码
必须是字母数字、破折号或下划线，介于5到15个字符之间
确认密码
必须是字母数字、破折号或下划线，介于5到15个字符之间，并且与原始密码匹配
登记
（功能（）{
“严格使用”；
addEventListener（“加载”，函数（）{
var form=document.getElementById（“表单验证”）；
表单。addEventListener（“提交”，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（“已验证”）；
}，假）；
}，假）；
}());

您可以进行检查以验证密码值是否相同，如果不相同，则中止提交

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

您只需更改警报窗口即可向用户显示错误文本。下面是一个示例，以了解其外观：

---

另一个建议是使用类似jQuery的东西，这样语法处理起来就不那么麻烦了。但这取决于您。

从您的代码中

checkValidity（）

将只检查表单HTML5约束（必需、格式、模式、最小值、最大值）的有效性，但没有验证密码的约束。实际上，这就像比较两个字段的内容是否相同。此外，如果要取消表单提交，还需要

返回false在末尾。通常HTML5不会提交有验证错误的表单

在您的情况下，我建议您在输入验证字段时进行验证，并禁用提交按钮，直到密码匹配

document.getElementById('validation3').addEventListener('keyup',function(e){
    if(this.value !== document.getElementById('validation2').value){
        document.getElementById('validation4').disabled=true;
        this.classList.replace('pass','nopass');
    }else{
        document.getElementById('validation4').disabled=false;
        this.classList.replace('nopass','pass');
    }
}

您需要为提交按钮分配一个
id='validation4'
。要进行可视更改，您可以创建CSS规则来处理此（'pass'，'nopass'）。
使用此规则应该可以

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

您可以通过JavaScript约束验证API实现此验证，这是一个
customError
，您可以在提交表单之前进行设置

我将提供BootStrap4的示例，并假设jQuery是一个可选但常见的BootStrap依赖项，缩写为
$（“#pw1”）.val（）

HTML

密码
重复密码
请重复您的密码
登记

剧本

功能验证_pw2（pw2）{
if（pw2.value！=$（“#pw1”）.val（））{
pw2.setCustomValidity（“重复密码不匹配”）；
}否则{
pw2.setCustomValidity（“”；//有效
}
}

重要的部分是
#pw2
中的
oninput
，它会在每次更改值时尝试验证。然后，
setCustomValidity
调用提供无效时显示的用户消息，现在有效时使用空字符串。
显示您尝试匹配两个密码的代码
<form>
  <div class="form-group">
    <label for="pw1">Password</label>
    <input type="password" class="form-control"
           id="pw1" placeholder="Password"
           required minLength=8>
  </div>
  <div class="form-group">
    <label for="pw2">Repeat Password</label>
    <input type="password" class="form-control"
           id="pw2" placeholder="Password" aria-describedby="pwHelp"
           required minLength=6
           oninput="validate_pw2(this)">
    <small id="pwHelp" class="form-text text-muted">Please repeat your password</small>
  </div>
  <button type="submit" class="btn btn-primary">Register</button>
</form>

<script> 
function validate_pw2(pw2) {
  if (pw2.value !== $("#pw1").val()) {
    pw2.setCustomValidity("Duplicate passwords do not match");
  } else {
    pw2.setCustomValidity(""); // is valid
  }
}
</script>