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

Question

我使用引导程序 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>

标签： javascriptbootstrap-4

Answer 1

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

<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