jQuery 验证 - 批量执行依赖?
jQuery Validation - Doing Depends in Bulk?
好吧,这可能是个愚蠢的问题,但是有没有一种方法可以根据某些外部值来确定需要哪些字段组(而不是形成组)- 无需执行 (bloated/redundant) 取决于每个字段的规则?
假设我有一个带有复选框的表单,用于指示一个人拥有的车辆(汽车、摩托车、船)。如果他们选中汽车箱,则会显示汽车字段(品牌、型号、年份等)。如果选中摩托车框,则会显示摩托车字段(品牌、型号、发动机等)。等等..
所以,根据选中这 3 个复选框中的哪一个,我想验证相应的字段。我该怎么做 w/o 取决于每个 field/rule?
是否可以将每种车辆类型的规则存储在 3 个预设数组中,然后根据复选框选择 added/removed?像这样非常简化的版本:
var car_rules_array = {
car_make: {
required:true
},
car_model: {
required:true
},
car_year: {
required:true
},
car_purchased: {
required: true,
date: true
},
car_vin: {
required: true,
remote: {
url: blah..
}
}
}
var boat_rules_array = {
boat_make: {
required:true
},
boat_model: {
required:true
},
boat_year: {
required:true
},
boat_purchased: {
required: true,
date: true
},
boat_sn: {
required: true,
remote: {
url: blah..
}
}
}
if ($('#has_car').is(':checked') == true) {
$('#TheForm').addrules(car_rules_array);
} else {
$('#TheForm').removerules(car_rules_array);
}
?
我只是不明白。
谢谢!
只需创建另一个 div,其中包含具有隐藏默认值的子复选框。选择后显示。
$('#car_check_box').on('click', function() {
$('#car_sub_check_box').fadeToggle();
});
使用 .rules('add')
和 .rules('remove')
动态控制没有 depends
属性 的规则。
if ($('#has_car').is(':checked') == true) {
// use .rules('add')
$('#fieldID').rules('add', {
required: true,
// another rule,...
});
} else {
// use .rules('remove')
$('#fieldID').rules('remove', 'required');
}
参见:http://jqueryvalidation.org/rules/
编辑:
基于编辑后的 OP 的响应。
不,您不能使用 .validate()
方法动态更改规则。一旦 .validate()
被调用,插件就会在您的表单上初始化,您不能再次调用它……它只是被忽略了。这就是开发人员为您提供 .rules()
方法的原因。
由于 .rules()
附加到字段而 .validate()
附加到表单,因此不能互换它们的对象文字。前者只是一个规则列表(对于一个字段),后者是所有字段名称及其规则的列表。
我唯一可以建议的可能会提高效率的方法是在每组字段上放置一个通用的 class。像 car
和 boat
。然后您可以使用 .each()
一次定位多个字段。不完美,但你明白了,可能会变得有创意...
$('.car').each(function() {
$(this).rules('add', {
required: true,
// another rule,...
});
});
您的字段都有 required
规则。如果您只是简单地单独切换该规则,则其他规则只会在该字段已填写时生效,否则将被忽略。
编辑 2:
如果您隐藏和显示这些字段,您可能根本不需要担心切换任何规则。默认情况下,该插件会忽略隐藏元素或包含在隐藏元素中的任何字段的所有规则。
@Sparkey:
哇。我看到了您的 $('.car').each.. 代码,就像 "Holly Shot! That's it!" 然后,可悲的是,我意识到它根本行不通。那里的问题是(例如)可以选中汽车复选框(显示字段),部分填充的字段,然后取消选中复选框(隐藏字段)。它们不会是必需的,因为必需的规则已被删除,但现在隐藏的字段仍然具有可能无法通过其他(不需要的)规则的值。
虽然您基于 class 的解决方案会更好更清洁,但我认为这里唯一的选择是 add/remove 通过 arrays/each 所有规则,例如:
function addrules(rulearr) {
for (var field in rulearr) {
$('#'+field).rules('add', rulearr[field]);
}
}
function removerules(rulearr) {
for (var field in rulearr) {
$('#'+field).rules('remove');
}
}
正在更改....
if ($('#has_car').is(':checked') == true) {
$('.car_fields').show();
addrules(car_rules_array);
} else {
removerules(car_rules_array);
$('.car_fields').hide();
}
你同意吗?
感谢您的responses/time!
好吧,这可能是个愚蠢的问题,但是有没有一种方法可以根据某些外部值来确定需要哪些字段组(而不是形成组)- 无需执行 (bloated/redundant) 取决于每个字段的规则?
假设我有一个带有复选框的表单,用于指示一个人拥有的车辆(汽车、摩托车、船)。如果他们选中汽车箱,则会显示汽车字段(品牌、型号、年份等)。如果选中摩托车框,则会显示摩托车字段(品牌、型号、发动机等)。等等..
所以,根据选中这 3 个复选框中的哪一个,我想验证相应的字段。我该怎么做 w/o 取决于每个 field/rule?
是否可以将每种车辆类型的规则存储在 3 个预设数组中,然后根据复选框选择 added/removed?像这样非常简化的版本:
var car_rules_array = {
car_make: {
required:true
},
car_model: {
required:true
},
car_year: {
required:true
},
car_purchased: {
required: true,
date: true
},
car_vin: {
required: true,
remote: {
url: blah..
}
}
}
var boat_rules_array = {
boat_make: {
required:true
},
boat_model: {
required:true
},
boat_year: {
required:true
},
boat_purchased: {
required: true,
date: true
},
boat_sn: {
required: true,
remote: {
url: blah..
}
}
}
if ($('#has_car').is(':checked') == true) {
$('#TheForm').addrules(car_rules_array);
} else {
$('#TheForm').removerules(car_rules_array);
}
?
我只是不明白。
谢谢!
只需创建另一个 div,其中包含具有隐藏默认值的子复选框。选择后显示。
$('#car_check_box').on('click', function() {
$('#car_sub_check_box').fadeToggle();
});
使用 .rules('add')
和 .rules('remove')
动态控制没有 depends
属性 的规则。
if ($('#has_car').is(':checked') == true) {
// use .rules('add')
$('#fieldID').rules('add', {
required: true,
// another rule,...
});
} else {
// use .rules('remove')
$('#fieldID').rules('remove', 'required');
}
参见:http://jqueryvalidation.org/rules/
编辑:
基于编辑后的 OP 的响应。
不,您不能使用 .validate()
方法动态更改规则。一旦 .validate()
被调用,插件就会在您的表单上初始化,您不能再次调用它……它只是被忽略了。这就是开发人员为您提供 .rules()
方法的原因。
由于 .rules()
附加到字段而 .validate()
附加到表单,因此不能互换它们的对象文字。前者只是一个规则列表(对于一个字段),后者是所有字段名称及其规则的列表。
我唯一可以建议的可能会提高效率的方法是在每组字段上放置一个通用的 class。像 car
和 boat
。然后您可以使用 .each()
一次定位多个字段。不完美,但你明白了,可能会变得有创意...
$('.car').each(function() {
$(this).rules('add', {
required: true,
// another rule,...
});
});
您的字段都有 required
规则。如果您只是简单地单独切换该规则,则其他规则只会在该字段已填写时生效,否则将被忽略。
编辑 2:
如果您隐藏和显示这些字段,您可能根本不需要担心切换任何规则。默认情况下,该插件会忽略隐藏元素或包含在隐藏元素中的任何字段的所有规则。
@Sparkey:
哇。我看到了您的 $('.car').each.. 代码,就像 "Holly Shot! That's it!" 然后,可悲的是,我意识到它根本行不通。那里的问题是(例如)可以选中汽车复选框(显示字段),部分填充的字段,然后取消选中复选框(隐藏字段)。它们不会是必需的,因为必需的规则已被删除,但现在隐藏的字段仍然具有可能无法通过其他(不需要的)规则的值。
虽然您基于 class 的解决方案会更好更清洁,但我认为这里唯一的选择是 add/remove 通过 arrays/each 所有规则,例如:
function addrules(rulearr) {
for (var field in rulearr) {
$('#'+field).rules('add', rulearr[field]);
}
}
function removerules(rulearr) {
for (var field in rulearr) {
$('#'+field).rules('remove');
}
}
正在更改....
if ($('#has_car').is(':checked') == true) {
$('.car_fields').show();
addrules(car_rules_array);
} else {
removerules(car_rules_array);
$('.car_fields').hide();
}
你同意吗?
感谢您的responses/time!