jQuery 跨多个字段进行验证

Question

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

这是我的验证电话

$("#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() 方法，但它似乎只考虑了一个元素。有什么想法吗？

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/

<小时/>

编辑:

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

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

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