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

    })();

Answer 1

您需要将一行代码添加到打开的表单标记中。<form&nbsp;class="form-signin&nbsp;needs-validation"&nbsp;novalidate&nbsp;oninput='confirmPassword.setCustomValidity(confirmPassword.value&nbsp;!=&nbsp;newPassword.value&nbsp;?&nbsp;true&nbsp;:&nbsp;false)'>我做了一个codepen。请检查一下。https://codepen.io/subhojitghosh/pen/JjROMLO参考：https://stackoverflow.com/a/53065577/10850734

Answer 2

我简化了您的验证逻辑并使用了disabledHTMLhidden的属性。您可以在codesandbox中看到重构后的代码JS代码：// To ensure the following JS code is executed when the DOM is ready to be manipulated by JS$(document).ready(function () {&nbsp; $("#newPassword, #confirmPassword").on("keyup", function () {&nbsp; &nbsp; // store the `newPassword` and `confirmPassword` in two variables&nbsp; &nbsp; var newPasswordValue = $("#newPassword").val();&nbsp; &nbsp; var confirmPasswordValue = $("#confirmPassword").val();&nbsp; &nbsp; if (newPasswordValue.length > 0 && confirmPasswordValue.length > 0) {&nbsp; &nbsp; &nbsp; if (confirmPasswordValue !== newPasswordValue) {&nbsp; &nbsp; &nbsp; &nbsp; $("#password-does-not-match-text").removeAttr("hidden");&nbsp; &nbsp; &nbsp; &nbsp; $("#submitBtn").attr("disabled", true);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if (confirmPasswordValue === newPasswordValue) {&nbsp; &nbsp; &nbsp; &nbsp; $("#submitBtn").removeAttr("disabled");&nbsp; &nbsp; &nbsp; &nbsp; $("#password-does-not-match-text").attr("hidden", true);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; });});并将您的 HTML 稍微更改为：<link&nbsp; rel="stylesheet"&nbsp; href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"&nbsp; integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"&nbsp; crossorigin="anonymous"/><script&nbsp; src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&nbsp; integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"&nbsp; crossorigin="anonymous"></script><script&nbsp; src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"&nbsp; integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"&nbsp; crossorigin="anonymous"></script><script&nbsp; src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"&nbsp; integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"&nbsp; crossorigin="anonymous"></script><script src="./index.js"></script><form class="form-signin needs-validation" novalidate>&nbsp; <div class="card shadow-sm">&nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <label class="sr-only" for="oldPassword">Current Password</label>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="form-control form-control-sm"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="oldPassword"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Current Password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; required&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; autocomplete="off"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aria-describedby="inputGroupPrepend"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <div class="invalid-feedback">Please enter current password.</div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="sr-only" for="newPassword">New Password</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="input-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; autocomplete="off"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="form-control form-control-sm"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="newPassword"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="New Password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aria-describedby="inputGroupPrepend"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; required&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="invalid-feedback">Please enter new password.</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <label class="sr-only" for="confirmPassword">Confirm Password</label>&nbsp; &nbsp; &nbsp; &nbsp; <div class="input-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; autocomplete="off"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="form-control form-control-sm"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="confirmPassword"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Confirm Password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aria-describedby="inputGroupPrepend"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; required&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="invalid-feedback">Password not a match.</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <p id="password-does-not-match-text" class="text-danger" hidden>&nbsp; &nbsp; &nbsp; &nbsp; Your new password does not match&nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; id="submitBtn"&nbsp; &nbsp; &nbsp; &nbsp; class="btn btn-md btn-primary btn-block"&nbsp; &nbsp; &nbsp; &nbsp; type="submit"&nbsp; &nbsp; &nbsp; &nbsp; disabled&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; Update&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; </div>&nbsp; </div></form>