Question

允许用户添加任意数量的输入，输入字段如下所示：

<input id="minAge[0]"...
<input id="maxAge[0]"...

<input id="minAge[1]"...
<input id="maxAge[1]"...

<input id="minAge[2]"...
<input id="maxAge[2]"... etc

问题

我想验证每对输入（minAge [i]，maxAge [i]）maxAge是否大于minAge。

具体解决方案

$.validator.addMethod('lessThan', function(value, element, param) {
    if (this.optional(element)) return true;
    var i = parseInt(value);
    var j = parseInt($(param).val());
    return i < j;
}, "MinAge must be less than MaxAge");


$('#form').validate({
    rules: {
        minAge: {
            lessThan: '#maxAge'
        }
 });

如何将此解决方案设为通用？

Answer 1

首先，对于此插件，必须具有name属性。 jQuery Validation插件需要唯一的 name属性来跟踪所有输入。

<input id="minAge[0]" name="minAge[0]"...
<input id="maxAge[0]" name="maxAge[0]"...

<input id="minAge[1]" name="minAge[1]"...
<input id="maxAge[1]" name="maxAge[1]"...

<input id="minAge[2]" name="minAge[2]"...
<input id="maxAge[2]" name="maxAge[2]"... etc

然后，在您用于动态添加字段的任何函数中，您将使用the .rules('add') method。

$('#minAge[1]').rules('add', {
    required: true,
    lessThan: '#maxAge[1]',
    // another rule, etc.
});

由于我看不到创建新元素的函数，我只能假设你有某种索引变量。

var min = '#minAge[' + i + ']',
    max = '#maxAge[' + i + ']';

$(min).rules('add', {
    required: true,
    lessThan: max,
    // another rule, etc.
});

Answer 2

上述解决方案的一个小修复：

对于jquery验证将失败。尝试使用名称xxx [i]和id xxx_i，并在规则中处理id，所以将代码更改为：

var min = '#minAge_' + i,
    max = '#maxAge_' + i;

$(min).rules('add', {
    required: true,
    lessThan: max,
    // another rule, etc.
});

jquery验证对输入字段的动态数量比较

2 个答案: