14

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

这是我的验证电话

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

我查看.addMethod()了 validate 插件的组功能和方法，但似乎它只是在考虑一个元素的情况下制作的。有任何想法吗？

4

3 回答 3

30

按照文档创建自定义方法/规则。在这里，我简单地称它为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/

编辑：

添加了一个处理程序以在其他字段更改时keyup focusout重新验证。attendees这些与插件使用的两个默认事件处理程序相同。

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

新的工作演示：http: //jsfiddle.net/ua0534dv/2/

于 2013-09-04T14:55:09.923 回答
1

Sparky 的回答并不完整：更改adults时children需要重新验证attendees。

在最后附加这个：

$('input[name=adults],input[name=children]').on('change', function(){
  $('input[name=attendees]').removeData("previousValue").valid();
});
于 2015-01-13T15:44:09.140 回答
-1

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

$("#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"                
    }               
});
于 2013-09-04T02:05:05.097 回答