Javascript 如何检查<；的自定义验证；输入>；每当其值发生变化时，使用引导4？

我有一份报名表，我需要在提交前对其进行验证。我正在使用bootstrap 4表单验证，它工作得很好。
验证具有标准验证规则（如required、minlengh、patterns等）的字段非常简单，但验证需要自定义规则的字段却不是那么简单

在我的例子中，我有两个确认字段，一个用于电子邮件，另一个用于密码。
用户需要输入与之前输入的相同的电子邮件和密码，如果它们匹配，则可以继续提交

我花了一些时间使它工作，我做到了。
唯一的问题是，验证是在单击submit按钮之后进行的，而其他字段的验证则不会发生（在值更改时会进行检查）

所以我想知道你们是否能帮我找出代码中的错误，或者我需要添加什么

以下是我表格的代码：

请选择一个用户名。
此电子邮件无效。
密码应包含六个或更多字符。
密码不需要。
登录

下面是验证脚本：

<script>
// 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();
        }   
        
        //checando email
        var email = $('#email').val();
        var confirmemail = $('#confirm-email').val();
        
        if (email != confirmemail) {
            document.getElementById('confirm-email').setCustomValidity('Email Should Match');
            $('#validate').html('Emails Should Match');
            $("#validate").addClass("error");
            $("#confirm-email").addClass("error-text");
            event.preventDefault();
            event.stopPropagation();              
        } else {
            document.getElementById('confirm-email').setCustomValidity('');
            $("#validate").removeClass("error");
            $("#confirm-email").removeClass("error-text");  
        }
        
        //checando password
        var password = $('#password').val();
        var confirmedpass = $('#retype-password').val();
        
        if (password != confirmedpass) {
            document.getElementById('retype-password').setCustomValidity('Passwords Should Match');
            $('#validate_pass').html('Passwords Should Match');
            $("#validate_pass").addClass("error");
            $("#retype-password").addClass("error-text");
            event.preventDefault();
            event.stopPropagation();              
        } else {
            document.getElementById('retype-password').setCustomValidity('');
            $("#validate_pass").removeClass("error");
            $("#retype-password").removeClass("error-text");    
        }
        
        form.classList.add('was-validated');
        
      }, false);
    });
  }, false);
})();
</script>

//示例starter JavaScript，用于在存在无效字段时禁用表单提交
（功能（）{
"严格使用",；
addEventListener（'load'，function（））{
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'needs-validation'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
form.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}   
//checando电子邮件
var email=$（'#email'）.val（）；
var confirmemail=$（“#确认电子邮件”）.val（）；
如果（电子邮件！=确认邮件）{
document.getElementById（'confirm-email'）。setCustomValidity（'email应匹配'）；
$（'#validate'）.html（'电子邮件应匹配'）；
$（“#验证”）.addClass（“错误”）；
$（“#确认电子邮件”）.addClass（“错误文本”）；
event.preventDefault（）；
event.stopPropagation（）；
}否则{
document.getElementById（'confirm-email'）.setCustomValidity（''）；
$（“#验证”）.removeClass（“错误”）；
$（“#确认电子邮件”）.removeClass（“错误文本”）；
}
//checando密码
var password=$（'#password'）.val（）；
var confirmedpass=$（“#重新键入密码”）.val（）；
如果（密码！=确认密码）{
document.getElementById（'retype-password'）。setCustomValidity（'Passwords Should Match'）；
$（'validate_pass'）.html（'Passwords Should Match'）；
$（“验证通过”）.addClass（“错误”）；
$（“#重新键入密码”）.addClass（“错误文本”）；
event.preventDefault（）；
event.stopPropagation（）；
}否则{
document.getElementById（'retype-password'）。setCustomValidity（''）；
$（“验证通过”）.removeClass（“错误”）；
$（“#重新键入密码”）.removeClass（“错误文本”）；
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
})();

看起来您只有一个表单。为什么不

const form=document.getElementById（'signupForm'）

？为什么要使用

.filter

循环？不，我在本页还有其他表单，我也会验证。我没有在这里发布它，因为它没有需要自定义验证的字段。。。