使用“验证规则”验证“运行时 JSON 数组”答案

【问题标题】：Validate "Runtime JSON array" with "Validation Rules"使用“验证规则”验证“运行时 JSON 数组”
【发布时间】：2016-05-09 19:35:41
【问题描述】：

我们知道有几个插件可以在 HTML 表单上使用 jQuery 执行验证。

我们使用 jQuery Datatables，使用 DataTables Editor 进行内联编辑。

https://editor.datatables.net/examples/api/clientValidation.html

问题是每次提交一行时，每行中有几个字段是可编辑的，我们真的不想继续编写“if-else”条件来验证所有可能的可编辑列。

当用户编辑cell时，我们得到的是一个JSON名值数组（当前Row数据），例如这种格式，

var rowData = { 
              fld_name1: "value1",
              fld_name2: "value2",
              fld_name3: "value3"
              fld_name4: "value4"
              fld_name5: "value5"
           }

想检查我们是否可以将此数组提供给任何验证规则数组，例如 jQuery 验证插件使用的格式，https://jqueryvalidation.org/files/demo/

rules: {
            fld_name1: "required",
            fld_name2: "required",
            fld_name3: {
                required: true,
                minlength: 2
            },
            fld_name4: {
                required: true,
                minlength: 5
            },

            fld_name5: "required"
        },

并检查当前的“rowData”是否与“rules”数组中定义的规则验证良好。

这里的“rowData”数组是动态数组，为Datatable中的每一行创建了1个单独的实例。

HTML 表单元素（文本字段）也是由 jQuery 数据表编辑器动态生成的。所以没有在 jQuery Validation Plugin 上设置表单类型初始化的选项。

我很擅长使用可以提供此运行时数组验证功能的任何可用的 jQuery 验证。

【问题讨论】：

JQuery 数据表编辑器动态生成输入表单字段和相关信息。没有我们可以调用 .validate() 的包装形式。即使尝试这样做，它也会对现有的数据表编辑器逻辑/侦听器产生其他干扰。将 JSON 数组（行数据）与验证规则匹配的简单解决方案。正在检查此行中的解决方案，该解决方案可以将“rowData”中的规则与“rules”匹配，并为“rowData”中的数据不匹配或有错误的规则输出任何验证消息。
问题是寻求将“rowData”（动态 JSON 命名数组）与“规则”（预定义验证规则）匹配的解决方案。不知道为什么这个问题被降级。我试图找到一个真正问题的解决方案（“比较 JSON 命名数组”与“验证规则”），而不需要重新发明所有验证规则的轮子。 JQuery Validation Plugin 似乎已经完成了针对不同验证组合的所有研究。公开功能不仅可以比较表单，还可以比较动态 JSON（键：值对）数组，这将使其更加动态和有用的实用插件。

标签： jquery datatables jquery-validate

【解决方案1】：

当用户编辑单元格时，我们得到的是一个 JSON 名称-值数组（当前行数据），例如以这种格式...。想检查我们是否可以将此数组提供给任何验证规则数组，例如格式由 JQuery 验证插件使用

您不能“动态地”将任何内容输入rules 对象。由于.validate() 在页面加载时被调用一次以初始化插件，因此无法再次调用它......它被忽略了。

HTML 表单元素（文本字段）也是由 jQuery 数据表编辑器动态生成的。所以不要在 jQuery Validation 插件上设置表单类型初始化。

虽然您无法使用.validate() 初始化动态字段，但开发人员提供了一个名为.rules() 的方法，您可以调用该方法来动态分配、更新或删除任何表单输入元素中的规则随时。所以你必须解析你的 JSON 数组并应用你认为合适的 .rules()...

$('[name="fld_name1"]').rules('add', {
    required: true,
    minlength: 2
});

演示：http://jsfiddle.net/ejc1dq8g/

只要将选择器附加到.each()，就可以一次应用到多个字段。

$('[name^="fld_"]').each(function() {
    $(this).rules('add', {
        required: true,
        minlength: 2
    });
});

或者，您可以简单地在任何表单输入元素上使用HTML5 validation attributes，jQuery Validate 插件将自动拾取并使用这些元素，即使在动态创建的元素上也是如此。

<input name="fld_name1" required="required" minlength="2" ....

演示 2：http://jsfiddle.net/84zv61n4/

编辑：

引用OP's Comment:

“没有包装 form 这样我们可以调用 .validate()”

如果是这样，你绝对不能在没有<form></form> 容器的情况下使用 jQuery Validate 插件。没有解决方法。我希望你能在 OP 中提到这个关键细节，因为这样可以节省时间和精力。

【讨论】：

我们真的不会覆盖数据表编辑器逻辑/侦听器，而是将它的编辑器留在表单元素的生成和提交上。我们要应用这些验证规则的地方是在向服务器发出 Ajax 请求之前，在 Editors 函数中，我们可以访问 JSON 名称/值数组对中的表数据。所以在这里我们试图验证名称数组是否符合验证规则。使用 HTML5 验证属性的第二种方法需要为不同的字段扩展 Datatable 编辑器功能。

【解决方案2】：

仅供参考，对于正在寻找运行时 JSON 命名数组验证解决方案的人，以下库解决了这个问题，https://validatejs.org/

【讨论】：