Bootstrap 4 表单验证：为密码比较添加相同的规则

Question

我使用 Bootstrap 4 / JS 表单验证 (https://getbootstrap.com/docs/4.0/components/forms/#custom-styles)，它按预期工作。

我尝试添加相同的格式和提交规则来比较两个密码字段，密码 ('#pw') 和重复密码 ('#pwRepeat')，以便显示匹配时为绿色单元格边框和复选标记图标，不匹配时为红色单元格边框和错误图标。

我的问题是我无法让它触发无效格式。当密码不匹配时手动将其设置为无效（对应的行见下面的 cmets）。

有人可以告诉我如何正确执行此操作并提供简短说明吗？

我的 JS：

(function() {
    'use strict';
    window.addEventListener('load', function() {
        var forms = document.getElementsByClassName('needs-validation');
        
        var validation = Array.prototype.filter.call(forms, function (form) {
            form.addEventListener('submit', function (event) {
                var pw = document.getElementById('pw').value; // $('#pw').val();
                var pwRepeat = document.getElementById('pwRepeat').value; // $('#pwRepeat').val();

                if(pwRepeat != pw) {
                    // set cell border color to red and show error icon for invalid input
                    pwRepeat.addClass('invalid'); // not working
                }
                if(form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');    

                // submit if no errors where found
                if((pwRepeat == pw) && (form.checkValidity() === true)) {
                    // do stuff
                }

            }, false);
        });
    },
    false);
})();

非常感谢，
蒂姆

Answer 1

这里有几个问题。

var pwRepeat = document.getElementById('pwRepeat').value;

pwRepeat 是一个值而不是一个元素，因此以下内容将不起作用，并且 addClass 也不正确。

pwRepeat.addClass('invalid'); 

将以上内容替换为：

 document.getElementById('pwRepeat').classList.add("invalid");

鉴于没有有效的示例，上述内容未经测试，但应该为您指明正确的方向，了解为什么目前这不起作用。