Question

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

这是我的验证电话

$("#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插件的组功能和addMetod，但它似乎只考虑了一个元素。有什么想法吗？

Answer 1

关注the documentation以创建自定义方法/规则。在这里，我只需将其称为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需要在更改后重新验证attendees。

最后附上：

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

jQuery跨多个字段进行验证

3 个答案: