jQuery跨多个字段进行validation

我有3个输入字段，询问人数，其中有多少是成人，有多少是孩子。 我试图使用jQuery validate插件添加一个自定义方法，其中儿童+成人=人数

这是我的validation电话

$("#form2").validate({ errorElement: "span", rules: { attendees: { required: true, digits: true }, adults: { required: true, digits: true }, children: { required: true, digits: true } }, messages: { attendees: "Enter the number of persons (including yourself)", adults: "Enter number of adults", children: "Enter number of childern" } }); 

我查看了validate插件的组function和addMetod，但它似乎只考虑了一个元素。 有任何想法吗 ？

Answer 1

请按照文档创建自定义方法/规则。 在这里，我简单地将其totalCheck ，但您可以将其命名为任何您想要的名称。

 $.validator.addMethod('totalCheck', function(value, element, params) { var field_1 = $('input[name="' + params[0] + '"]').val(), field_2 = $('input[name="' + params[1] + '"]').val(); return parseInt(value) === parseInt(field_1) + parseInt(field_2); }, "Enter the number of persons (including yourself)"); 

它的实现与任何其他规则一样。 这两个参数是您要检查的其他两个字段的name属性。 由于此新规则表示该字段必须包含其他两个字段的总和，因此required和digits规则现在是多余的，可以删除。

 $("#form2").validate({ errorElement: "span", rules: { attendees: { totalCheck: ['adults', 'children'] // <-- your custom rule }, adults: { required: true, digits: true }, children: { required: true, digits: true } }, messages: { adults: "Enter number of adults", children: "Enter number of childern" } }); 

工作演示 ： http ： //jsfiddle.net/hBXL6/

Answer 2

Sparky的答案并不完整： adults和children在更换时需要重新validationattendees 。

在最后添加：

 $('input[name=adults],input[name=children]').on('change', function(){ $('input[name=attendees]').removeData("previousValue").valid(); }); 

注意：虽然我持有CS博士学位，但我还没有评论意见……因此是一个新的答案。

Answer 3

正如评论中所建议的，这不是一个好习惯。 尽管如此，如果您仍想这样做：

 $("#form2").validate({ errorElement: "span", rules: { attendees: { equal: $("#form2 #adults").val() + $("#form2 #children").val(); }, adults: { required: true, digits: true }, children: { required: true, digits: true } }, messages: { attendees: "Enter the number of persons (including yourself)", adults: "Enter number of adults", children: "Enter number of childern" } });