Javascript 如何在我的所有web表单中重用一个jquery验证函数？

我正在从事一个基于web的项目（最终项目），它有很多表单来捕获客户的数据。每个表单都有不同的字段。例如，在注册表单中，可以有用户名、密码等字段，但在另一种表单中，可以有月收入、DOB等字段

我需要维护一个公共JS文件，它将执行所有这些验证

$(function() {

    $("form").submit(function() {
        //removing errors appeared in early submissions
        $("span.error").remove();
        var abort = false;
        //looping through all the input fields
        $(":input").each(function() {
            //If the input value is empty display an error
            if ($.trim($(this).val()) === "") {
                $(this).after("<span class='error'>This field cannot be empty</span>");
                abort = true;
            }


        }); 


        if (abort) {
            //this will avoid form submission if there are errors
            return false;
        } else {
            return true;
        }
    });


}); 

$（函数（）{
$（“表格”）。提交（函数（）{
//删除早期提交中出现的错误
$（“span.error”）.remove（）；
var abort=false；
//循环遍历所有输入字段
$（“：输入”）。每个（函数（）{
//如果输入值为空，则显示错误
if（$.trim（$（this）.val（））==“”）{
$（this）.after（“此字段不能为空”）；
中止=真；
}
}); 
如果（中止）{
//这将避免在出现错误时提交表单
返回false；
}否则{
返回true；
}
});
}); 

这是我的验证函数，它将确保任何形式的字段都不会留空。我所要做的就是在外部调用JS文件（使用jquery库）

我不知道如何调整可用于验证的相同函数，如最小长度、最大长度、预匹配等。问题是，不需要验证所有字段的最小、最大长度。只需要验证特定字段

我如何处理这种情况？我是否必须为每个表单编写特定的验证

---

注意：-我不应该使用jquery验证插件

取决于您希望如何指定验证。您可以将类添加到您在validate函数中检查的字段中，并在类上对该字段进行不同的处理。您还可以检查字段的其他属性，例如max/min和data-*属性

---

不过，我知道您说过不应该使用jQuery验证插件，但您可能希望尝试重新访问它。你的问题是，你很可能最终只是复制/编写你自己版本的验证插件，那么为什么不使用已经存在且运行良好的插件呢？

我的建议是缩小字段类型的验证范围，即对于文本字段，你需要非空、最小、最大等，对于密码，您可能需要至少一个大写字母，等等

您可以为要使用的每个验证类型创建一个类，并相应地添加这些类

---

这是我所能想到的最具可维护性和适应性的方法，还有一些不同的方法。我这样做的方式是在我的字段

data-*

中使用属性

最小长度为3、最大长度为10的必填字段示例：

<input type="text" name="bla" data-is_required="true" data-min_length="3" data-max_length="10" />

这将使您更容易使用后端语言自动生成它们，以便您的银行端和前端验证保持同步

编辑

以下是您在示例中如何使用它：

$(":input").each(function() {
    if ($(this).attr('data-is_required') == "true" && $.trim($(this).val()) === "") {
        $(this).after("<span class='error'>This field cannot be empty</span>");
        abort = true;
    }    
}); 

$（“：输入”）。每个（函数（）{
if（$（this.attr（'data-is_required'）=“true”&&&$.trim（$（this.val（））====”）{
$（this）.after（“此字段不能为空”）；
中止=真；
}    
}); 

如何更改ID的值？您可以像在代码中一样更改ID的值，如果（$（this）.attr（'data-min_length'））我会尝试一下，则在每个语句中都会更改ID的值。：）

$(":input").each(function() {
    if ($(this).attr('data-is_required') == "true" && $.trim($(this).val()) === "") {
        $(this).after("<span class='error'>This field cannot be empty</span>");
        abort = true;
    }    
});