每种表单的通用表单验证器

如何解决每种表单的通用表单验证器

我在不同页面上有多个具有相同字段（例如电子邮件）的表单，因此我想创建一个通用类/函数来验证具有不同字段的不同表单，但我对JavaScript没有太多的经验。

这是原始验证器在函数形式中的外观：

function validateform(form) {

    $(".req").css("border","1px solid green");
    $(".email").css("border","1px solid green");
    $(".docs-file").css("border","1px solid green");
    $(".images-file").css("border","1px solid green");

    $(".req").each(function() {
        if($(this).val() == "" ||  $(this).val().replace(/\s/g,'').length == 0) {
            $(this).css("border","1px solid red");
            return false;
        }
    });

    if((/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($(".email").val())))
    {}
    else {
        $(".email").css("border","1px solid red");
        return false;
    }

    var doc_file = $(".doc-file").val().split(/(\\|\/)/g).pop()
    var docs_re = /(\.pdf|\.doc|\.docx|\.pptx|\.xlsx|\.xls)$/i;

    if (!docs_re.exec(doc_file)) {
        $(".docs-file").css("border","1px solid red");
        return false;
    }


    var image_file = $(".image-file").val().split(/(\\|\/)/g).pop()
    var image_re = /(\.jpg|\.jpeg|\.bmp|\.gif|\.png)$/i;
    if (!image_re.exec(image_file) || $(".image-file").val() == '') {
        $(".images-file").css("border","1px solid red");
        return false;
    }

    var pwd1 = $('[name=password1]');
    var pwd2 = $('[name=password2]');
    var pwdre = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/;

    if (!pwdre.exec(pwd1)){
        pwd1.css("border","1px solid red");
        return false;
    }

    if (pwd1.val() == pwd2.val()){

    } else {
        pwd2.css("border","1px solid red");
        return false;
    }

    return True;
}

并非所有表单都共享相同的字段，我对基于字符的字段（例如名称/用户名/文本区域）进行了要求，但问题是将此函数放置在所有表单中会为没有密码的表单返回错误字段。

我的问题是，如果我将其作为一个类，如果这应该是图像，我应该如何以不同的形式调用不同的方法：

class FormValidator{

    email_validor(email){
        if((/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.val())))
        {}
        else {
            email.css("border","1px solid red");
            console.log('email error');
            return false;
        }
    }

}