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

您可以通过JavaScript约束验证API（customError）来实现此验证，您可以在提交表单之前对其进行设置。

我将提供BootStrap4的示例，并假设jQuery是可选的但常见的BootStrap依赖关系，以简化$("#pw1").val()

HTML

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

重要的部分是oninput中的#pw2，每次更改值时都会尝试验证。然后setCustomValidity调用提供无效时显示的用户消息，当有效时使用空字符串。

Answer 2

您可以进行检查以确认密码值相同，如果不相同，则中止提交。

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

您只需更改警报窗口即可向您的用户显示错误文本。以下是查看其外观的示例：https://jsfiddle.net/aq9Laaew/55184/

另一个建议是使用类似jQuery的东西，以免语法麻烦。但这取决于你。

Answer 3

从您的代码checkValidity()中，将仅检查HTML5格式的约束条件的有效性（必填，格式，模式，最小，最大），但没有用于验证密码的约束。实际上，这就像比较两个字段的内容是否相同。另外，如果您要取消提交表单，则还需要最后return 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规则来处理此问题（“通过”，“不通过”）。

Answer 4

使用它应该可以。

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

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

4 个答案:

HTML

脚本