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

Question

我正在使用 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] 这样的数组值，那就太好了。

Answer 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 以及更通用的选择器，例如 "starts with"。您将需要一个 .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 解决方案，您可以只添加一个内联 class 或一个 HTML5 属性，然后 jQuery 验证插件将会启动自动选择其中之一。

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

或

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

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

Use jquery validation plugin to validate complex array of input

jquery

jquery-validate