如何在 Jquery 验证规则中实现“或”条件

Question

我目前正在使用 jquery 验证插件来验证我的表单，这里我想验证 固定电话号码 和 手机号码 。用户想输入任何一个。所以我想要在 jquery 验证规则中使用 Or 条件。

rules{ 'landline':{ required:true }, 'mobile':{ required:true } }

如何将任何一个字段设为必填。

Answer 1

如果您希望错误消息正确切换并保持代码简洁，只需使用专门为这种情况创建的方法即可。规则/方法称为require_from_group 并包含在the additional-methods.js file 中。

$(document).ready(function () {

    $("#form").validate({
        rules: {
            landline: {
                require_from_group: [1, '.phone'],
                number: true
            },
            mobile: {
                require_from_group: [1, '.phone'],
                number: true
            }
        }
    });

});

演示：http://jsfiddle.net/t45dc/

如果要将两个错误消息合并为一个，请使用groups 选项...

$(document).ready(function () {

    $("#form").validate({
        rules: {
            landline: {
                require_from_group: [1, '.phone'],
                number: true
            },
            mobile: {
                require_from_group: [1, '.phone'],
                number: true
            }
        },
        groups: {
            phones: 'landline mobile'
        }
    });

});

演示：http://jsfiddle.net/t45dc/1/

Answer 2

试试这个

landline: {
    required: function(element) {
        if ($("#m_no").val().length > 0) {
            return false;
        } else {
            return true;
        }
    },
    number: true
},
mobile: {
    required: function(element) {
        if ($("#land_no").val().length > 0) {
            return false;
        } else {
            return true;
        }
    },
    number: true
}

Answer 3

您不需要包含additional-methods.js。

您需要从 validaor.js 和 additional-methods.js 中提取所需的部分并像这样定义

在验证器原型中添加一个方法elementValue：

$.validator.prototype.elementValue = function( element ) {
            var $element = $( element ),
                type = element.type,
                val, idx;

            if ( type === "radio" || type === "checkbox" ) {
                return this.findByName( element.name ).filter( ":checked" ).val();
            } else if ( type === "number" && typeof element.validity !== "undefined" ) {
                return element.validity.badInput ? "NaN" : $element.val();
            }

            if ( element.hasAttribute( "contenteditable" ) ) {
                val = $element.text();
            } else {
                val = $element.val();
            }

            if ( type === "file" ) {

                // Modern browser (chrome & safari)
                if ( val.substr( 0, 12 ) === "C:\\fakepath\\" ) {
                    return val.substr( 12 );
                }

                // Legacy browsers
                // Unix-based path
                idx = val.lastIndexOf( "/" );
                if ( idx >= 0 ) {
                    return val.substr( idx + 1 );
                }

                // Windows-based path
                idx = val.lastIndexOf( "\\" );
                if ( idx >= 0 ) {
                    return val.substr( idx + 1 );
                }

                // Just the file name
                return val;
            }

            if ( typeof val === "string" ) {
                return val.replace( /\r/g, "" );
            }
            return val;
        }

并定义新规则：

$.validator.addMethod("require_from_group", function(value, element, options) {
        var $fields = $(options[1], element.form),
            $fieldsFirst = $fields.eq(0),
            validator = $fieldsFirst.data("valid_req_grp") ? $fieldsFirst.data("valid_req_grp") : $.extend({}, this),
            isValid = $fields.filter(function() {
                return validator.elementValue(this);
            }).length >= options[0];

        // Store the cloned validator for future validation
        $fieldsFirst.data("valid_req_grp", validator);

        // If element isn't being validated, run each require_from_group field's validation rules
        if (!$(element).data("being_validated")) {
            $fields.data("being_validated", true);
            $fields.each(function() {
                validator.element(this);
            });
            $fields.data("being_validated", false);
        }
        return isValid;
    }, $.validator.format("Please select at least {0} Energy or Water fields."));

还有新的字段规则 synatx：

energyCategory: {
                  require_from_group: [1,'.select-drop-down']
                },
waterCategory: {
                require_from_group: [1,'.select-drop-down']
               } 

这将适用于旧的 jquery 验证插件版本 1.9，也无需升级到新版本。