jQuery跨多个字段验证

我有3个输入字段，询问人数，其中有多少是成年人，有多少是儿童。我正在尝试使用jqueryvalidate插件添加一个自定义方法，其中 儿童+成人=人数

这是我的确认电话

$("#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插件的组功能和

.addMethod（）

方法，但它似乎是在考虑一个元素的情况下精心设计的。有什么想法吗？

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

$("#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"                
    }               
});

遵循以下步骤创建自定义方法/规则。在这里，我简单地称它为

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

属性。由于此新规则规定该字段必须包含其他两个字段的总和，因此

必需

和

数字

规则现在是多余的，可以删除

$("#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"
    }
});

---

新的工作演示：

Sparky的回答不完整：

成人

和

儿童

在更改时需要重新验证

与会者

在末尾附加以下内容：

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

---

你可以在

.each（）

语句中加入它，也许？我建议，如果你想设置一个总数=成人+儿童的限制，完全跳过与会者的输入。相反，要有一个隐藏字段“total”，其值应在提交表单之前更新为children+成人。没有称为

equal

的方法或规则。是否有一些参数限制？@Limon，我知道的参数数量没有限制。@user2956826是正确的-更改成人/儿童字段不会重新验证与会者。我将您的想法纳入了我的答案中。无需使用

removeData（）

，因为此代码中没有使用

.data（）

设置任何内容；并且应该是

keyup

和

focusout

，这样您就可以像插件的默认值一样获得动态验证。

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