Bootstrap 5表单密码验证问题：密码始终显示有效求助

我正在学习JavaScript和Bootstrap v5，做了一个注册表单。其他输入字段的必填验证按照Bootstrap文档实现没问题，但密码字段的验证（检查是否为空、两次输入是否一致）出了问题——不管密码填没填、是否一致，始终显示有效状态。以下是我的原代码：

原JavaScript代码 #

let forms = document.querySelectorAll(".needs-validations");
let pass1 = document.getElementById("password1");
let pass2 = document.getElementById("password2");

Array.prototype.slice.call(forms).forEach( function (form){
    form.addEventListener("submit",function (ev) {

        // test password check....
        if (pass1.value !== pass2.value || pass1.value === "" || pass2.value === "" ){
            pass1.className = 'form-control is-invalid'
            pass2.className = 'form-control is-invalid'
        }

        if (!form.checkValidity()){
            ev.preventDefault()
            ev.stopPropagation()
        }
        form.classList.add("was-validated")

    })
})

原HTML代码 #

<body class="body">
    <div class="center">
        <h4 class="title">Sign Up New User</h4>
    <form name="signin-form" method="post" class="needs-validations" novalidate id="forms">
        <div class="container">
            <div class="row mt-3">
                <div class="col">
                    <label for="name" class="form-label">Name</label>
                    <input type="text" class="form-control" id="name" placeholder="Name" required>
                    <div class="invalid-feedback">
                        Name can't be empty
                    </div>
                </div>
                <div class="col">
                    <label for="surname" class="form-label">Surname</label>
                    <input type="text" class="form-control" id="surname" placeholder="Surname" required>
                    <div class="invalid-feedback">
                        Surname can't be empty
                    </div>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="Email" required>
                    <div class="invalid-feedback">
                        invalid email
                    </div>
                </div>
                <div class="col-4 text-end">
                    <label for="email" class="form-label">Role</label>
                    <select class="form-select" id="validationCustom04" required>
                        <option selected disabled value="">Choose...</option>
                        <option>Captain</option>
                        <option>First Officer</option>
                    </select>
                    <div class="invalid-feedback">
                        Please select role
                    </div>
                </div>
            </div>
            <div class="row mt-3 ">
                <div class="col">
                    <label for="password1" class="form-label ">Password</label>
                    <input type="password" class="form-control" id="password1" placeholder="Password">
                </div>
                <div class="col">
                    <label for="password2" class="form-label ">Confirm Password</label>
                    <input type="password" class="form-control" id="password2" placeholder="Password">
                    <div class="invalid-feedback">
                        Password not match
                    </div>
                </div>
            </div>
            <div class="row-cols-2 mt-3">
                <button class="btn btn-primary" type="submit">Submit form</button>
            </div>
        </div>
    </form>
    </div>
    <script src="/validation.js"></script>
    <script src="/js/bootstrap.bundle.min.js" ></script>
</body>

问题原因 #

1. 表单类名错误：Bootstrap官方验证类是needs-validation，原代码里写成了needs-validations（多了个s），导致Bootstrap的验证逻辑无法触发。
2. 密码字段缺少required属性：没有给密码输入框添加required，form.checkValidity()不会校验密码是否为空，手动添加的is-invalid样式也会被默认逻辑干扰。
3. 未处理验证通过的状态：代码只设置了错误时的is-invalid类，但没在密码验证通过时移除该类并添加is-valid，导致状态一直显示异常。
4. 密码验证失败未阻止提交：当密码验证不通过时，没有调用ev.preventDefault()和ev.stopPropagation()，表单仍会提交，错误状态被后续逻辑覆盖。

修改后的代码 #

HTML部分 #

修正表单类名，给密码字段添加required，并给第一个密码框补充错误提示：

<body class="body">
    <div class="center">
        <h4 class="title">Sign Up New User</h4>
    <form name="signin-form" method="post" class="needs-validation" novalidate id="forms">
        <div class="container">
            <!-- 其他字段保持不变 -->
            <div class="row mt-3 ">
                <div class="col">
                    <label for="password1" class="form-label ">Password</label>
                    <input type="password" class="form-control" id="password1" placeholder="Password" required>
                    <div class="invalid-feedback">
                        Password cannot be empty
                    </div>
                </div>
                <div class="col">
                    <label for="password2" class="form-label ">Confirm Password</label>
                    <input type="password" class="form-control" id="password2" placeholder="Password" required>
                    <div class="invalid-feedback">
                        Passwords do not match
                    </div>
                </div>
            </div>
            <!-- 其他部分保持不变 -->
        </div>
    </form>
    </div>
    <script src="/validation.js"></script>
    <script src="/js/bootstrap.bundle.min.js" ></script>
</body>

JavaScript部分 #

修正类名选择，完善验证状态切换逻辑，密码验证失败时阻止表单提交：

let forms = document.querySelectorAll(".needs-validation");
let pass1 = document.getElementById("password1");
let pass2 = document.getElementById("password2");

Array.prototype.slice.call(forms).forEach(function(form) {
    form.addEventListener("submit", function(ev) {
        let isPasswordValid = true;

        // 密码空值校验
        if (pass1.value === "" || pass2.value === "") {
            pass1.classList.add('is-invalid');
            pass2.classList.add('is-invalid');
            isPasswordValid = false;
        } 
        // 密码一致性校验
        else if (pass1.value !== pass2.value) {
            pass1.classList.add('is-invalid');
            pass2.classList.add('is-invalid');
            isPasswordValid = false;
        } 
        // 验证通过状态
        else {
            pass1.classList.remove('is-invalid');
            pass1.classList.add('is-valid');
            pass2.classList.remove('is-invalid');
            pass2.classList.add('is-valid');
        }

        // 结合Bootstrap自带验证，任一验证失败则阻止提交
        if (!isPasswordValid || !form.checkValidity()) {
            ev.preventDefault();
            ev.stopPropagation();
        }

        form.classList.add("was-validated");
    });
});

额外优化建议 #

• 给密码输入框添加input事件监听器，实时触发验证逻辑，不用等到提交才提示错误，提升用户体验。
• 可以增加密码长度校验（比如至少6位），增强账号安全性。

内容的提问来源于stack exchange，提问作者Damiano Miazzi