使用 jquery 验证插件来验证复杂的输入数组答案

【问题标题】：Use jquery validation plugin to validate complex array of input使用 jquery 验证插件来验证复杂的输入数组
【发布时间】：2020-04-20 21:56:21
【问题描述】：

我正在使用 jquery 验证插件来验证复杂的输入数组。

HTML 表单

<form class="test_frm" action="" method="post" >
    <input class="form-control" type="text" name="rateType[0][type]" />
    <input class="form-control" type="text" name="rateType[0][rate]" />
    <input class="form-control" type="text" name="rateType[0][percent]" />

    <input class="form-control" type="text" name="rateType[1][type]" />
    <input class="form-control" type="text" name="rateType[1][rate]" />
    <input class="form-control" type="text" name="rateType[1][percent]" />

    <input class="form-control" type="text" name="rateType[2][type]" />
    <input class="form-control" type="text" name="rateType[2][rate]" />
    <input class="form-control" type="text" name="rateType[2][percent]" />
</form>

JS代码

$(function () {
    $(".test_frm").validate({
        submitHandler: function (form) {
            form.submit();
        },
        ignore: [],
        rules: {
            'rateType[]': {
                required: true
            }
        }
    });
});

我需要验证的是如果至少填写了一个文本输入应该是正确的。但是即使它适用于简单的数组输入，此代码也不起作用。如果有人知道如何做到这一点，那将是一个很大的帮助。如果 它不依赖于 [0] 或 [type] 之类的数组值，那就太好了。

【问题讨论】：

标签： jquery jquery-validate

【解决方案1】：

rules: {
    'rateType[]': {  // <- does not match any NAME on the form!
        required: true
    }
}

选项中使用的标识符必须与字段名称匹配。

rules: {
    'rateType[0][type]': {
        required: true
    },
    'rateType[0][rate]': {
        required: true
    },
    'rateType[0][percent]': {
        required: true
    },
    // etc. etc. for every field on the form.
}

由于这很麻烦，您可以使用the .rules() method 以及更通用的选择器，例如“以”开始。您需要.each()，因为此验证插件不接受包含多个元素的选择。

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

注意：.rules() 方法只能在您调用了.validate() 方法之后才能调用。

$(function () {

    $(".test_frm").validate({
        submitHandler: function (form) {
            form.submit();
        },
        ignore: [],
    });

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

});

或者，如果你想要一个 HTML 解决方案，你可以添加一个内联类或一个 HTML5 属性，jQuery Validate 插件会自动选择其中一个。

<input class="form-control" type="text" name="rateType[0][type]" class="required" />

或

<input class="form-control" type="text" name="rateType[0][type]" required="required" />

【讨论】：