【问题标题】:jQuery validate - how to validate one field with two XOR rulesjQuery validate - 如何使用两个 XOR 规则验证一个字段
【发布时间】:2012-10-08 10:44:58
【问题描述】:

我有一个可以包含电子邮件或手机的字段(在我的情况下,手机是 8 位数字)。 我已经尝试了两种方法(两个示例都不起作用,因为“元素”没有验证方法):

第一种方法:创建自定义方法并在那里进行验证,但是我必须创建自己的电子邮件和移动验证 - 我找不到如何在新方法中重用 jQuery 验证规则的方法。这是我想要的:

jQuery.validator.addMethod("mobileoremail", function(value, element) {
        return this.optional(element) || 
               element.validate({ rules: { digits: true, rangelength: [8, 8] } }) || 
               element.validate({ rules: { email: true } });
    }, "Invalid mobile or email");

第二种方法:创建依赖规则。而且在这种情况下,我找不到如何重用 jQuery 验证规则的方法。

{ myRules: {
            rules: {
                user: {
                    required: true,
                    email: {
                        depends: function(element) {
                            return !element.validate({ rules: { mobile: true } });
                        }
                    },
                    mobile: {
                        depends: function (element) {
                            return !element.validate({ rules: { email: true } });
                        }
                    }
                }
            }
        }
    }

【问题讨论】:

    标签: jquery jquery-validate


    【解决方案1】:

    下面的验证方法怎么样……

    $.validator.addMethod("xor", function(val, el, param) {
        var valid = false;
    
        // loop through sets of nested rules
        for(var i = 0; i < param.length; ++i) {
            var setResult = true;
    
            // loop through nested rules in the set
            for(var x in param[i]) {
                var result = $.validator.methods[x].call(this, val, el, param[i][x]);
    
                // If the input breaks one rule in a set we stop and move
                // to the next set...
                if(!result) {
                    setResult = false;
                    break;
                }
            }
    
            // If the value passes for one set we stop with a true result
            if(setResult == true) {
                valid = true;
                break;
            }
        }
    
        // Return the validation result
        return this.optional(el) || valid;
    }, "The value entered is invalid");
    

    然后我们可以如下设置表单验证...

    $("form").validate({
      rules: {
        input: {
          xor: [{
            digits: true,
            rangelength: [8, 8]
          }, {
            email: true
          }]
        }
      },
      messages: {
        input: {
          xor: "Please enter a valid email or phone number"
        }
      }
    });    
    

    在此处查看实际操作http://jsfiddle.net/eJdBa/

    【讨论】:

    • 谢谢,这是一个有趣的验证问题
    • 我收到以下错误:TypeError: $.validator.methods[method] 未定义。你知道这是为什么吗?无论如何,很好的解决方案!
    • 没有看到我只能猜测的代码,您尝试使用的方法是否拼写正确,您应该能够使用console.log($.validator.methods); 转储可用方法,检查配置中的方法是否匹配转储的输出对象中的方法名称。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多