jQuery跨多个字段进行验证 [英] jQuery validate across multiple fields

问题描述

我有3个输入字段，要求输入人数，其中有多少个成年人和多少个孩子.我正在尝试使用jQuery validate插件在其中添加自定义方法 儿童+成人=人数

I have 3 input fields that ask for the number of people, and of them how many are adults and how many are children. I am trying to use jQuery validate plugin to add a custom method where children + adults = number of people

这是我的验证电话

$("#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()方法，但看来它的设计只考虑了一个元素.有什么想法吗?

I looked at the group feature and .addMethod() method of the validate plugin but it seems that it was crafted only with one element in mind. Any ideas?

推荐答案

按照文档用于创建自定义方法/规则.在这里，我只是将其命名为totalCheck，但是您可以根据自己的喜好命名.

Follow the documentation for creating a custom method/rule. Here, I simply call it totalCheck, but you can name it anything you wish.

$.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规则现在是多余的，可以删除.

It's implemented just like any other rule. The two parameters are the name attributes of the two other fields you want to check against. Since this new rule says the field must contain the sum of the two other fields, the required and digits rules are now redundant and can be removed.

$("#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.这些与插件使用的两个默认事件处理程序相同.

Added a keyup focusout handler to re-validate attendees whenever other fields are changed. These are the same two default event handlers used by the plugin.

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

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

这篇关于jQuery跨多个字段进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！