Bootstrap 4确认密码验证不起作用

Question

我正在使用 bootstrap 4 表单。任何人都知道如何正确添加密码与验证不匹配。 谢谢

  // Check if passwords match
    $('#pwdId, #confirmPassword').on('keyup', function () {
        if ($('#newPassword').val() != '' && $('#confirmPassword').val() != '' && $('#confirmPassword').val() == $('#confirmPassword').val()) {
       
        }
    });




// Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>


<form class="form-signin needs-validation" novalidate><div class="card shadow-sm">
    <div class="card-body">
  


        <div class="form-group">
            <label class="sr-only" for="oldPassword">Current Password</label>
            <input class="form-control form-control-sm" id="oldPassword" name="password" placeholder="Current Password"
                   required
                  type="password" autocomplete="off"  aria-describedby="inputGroupPrepend">
            <div class="invalid-feedback">
                Please enter current password.
            </div>
        </div>

        <div class="form-group">
            <div class="form-group">
                <label class="sr-only" for="newPassword">New Password</label>
                <div class="input-group">

                    <input type="password"   autocomplete="off"  class="form-control form-control-sm" id="newPassword" placeholder="New Password" aria-describedby="inputGroupPrepend" required>
                    <div class="invalid-feedback">
                        Please enter new password.
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="sr-only" for="confirmPassword">Confirm Password</label>
            <div class="input-group">

                <input type="password"   autocomplete="off"  class="form-control form-control-sm" id="confirmPassword" placeholder="Confirm Password" aria-describedby="inputGroupPrepend" required>
                <div class="invalid-feedback">
                    Password not a match.
                </div>
            </div>
        </div>



    <button id="submitBtn"  class="btn btn-md btn-primary btn-block" type="submit">Update</button>
  
    </div></div>
</form>

Answer 1

我简化了您的验证逻辑并使用了disabled 和hidden HTML 的属性。你可以看到重构后的代码在工作here in codesandbox

JS代码：

// To ensure the following JS code is executed when the DOM is ready to be manipulated by JS
$(document).ready(function () {
  $("#newPassword, #confirmPassword").on("keyup", function () {
    // store the `newPassword` and `confirmPassword` in two variables
    var newPasswordValue = $("#newPassword").val();
    var confirmPasswordValue = $("#confirmPassword").val();

    if (newPasswordValue.length > 0 && confirmPasswordValue.length > 0) {
      if (confirmPasswordValue !== newPasswordValue) {
        $("#password-does-not-match-text").removeAttr("hidden");
        $("#submitBtn").attr("disabled", true);
      }
      if (confirmPasswordValue === newPasswordValue) {
        $("#submitBtn").removeAttr("disabled");
        $("#password-does-not-match-text").attr("hidden", true);
      }
    }
  });
});

并将您的 HTML 稍微更改为：

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
  integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
  crossorigin="anonymous"
/>

<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
  integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
  integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
  crossorigin="anonymous"
></script>
<script src="./index.js"></script>

<form class="form-signin needs-validation" novalidate>
  <div class="card shadow-sm">
    <div class="card-body">
      <div class="form-group">
        <label class="sr-only" for="oldPassword">Current Password</label>
        <input
          class="form-control form-control-sm"
          id="oldPassword"
          name="password"
          placeholder="Current Password"
          required
          type="password"
          autocomplete="off"
          aria-describedby="inputGroupPrepend"
        />
        <div class="invalid-feedback">Please enter current password.</div>
      </div>

      <div class="form-group">
        <div class="form-group">
          <label class="sr-only" for="newPassword">New Password</label>
          <div class="input-group">
            <input
              type="password"
              autocomplete="off"
              class="form-control form-control-sm"
              id="newPassword"
              placeholder="New Password"
              aria-describedby="inputGroupPrepend"
              required
            />
            <div class="invalid-feedback">Please enter new password.</div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="sr-only" for="confirmPassword">Confirm Password</label>
        <div class="input-group">
          <input
            type="password"
            autocomplete="off"
            class="form-control form-control-sm"
            id="confirmPassword"
            placeholder="Confirm Password"
            aria-describedby="inputGroupPrepend"
            required
          />
          <div class="invalid-feedback">Password not a match.</div>
        </div>
      </div>

      <p id="password-does-not-match-text" class="text-danger" hidden>
        Your new password does not match
      </p>

      <button
        id="submitBtn"
        class="btn btn-md btn-primary btn-block"
        type="submit"
        disabled
      >
        Update
      </button>
    </div>
  </div>
</form>

Answer 2

您需要在开始的表单标签中添加一行代码。

<form class="form-signin needs-validation" novalidate oninput='confirmPassword.setCustomValidity(confirmPassword.value != newPassword.value ? true : false)'>

我做了一个codepen。请检查一下。

https://codepen.io/subhojitghosh/pen/JjROMLO

参考：https://stackoverflow.com/a/53065577/10850734