jQuery验证 – 如何使用两个XOR规则验证一个字段

前端之家收集整理的这篇文章主要介绍了jQuery验证 – 如何使用两个XOR规则验证一个字段前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个字段可以包含电子邮件或移动(在我的情况下,移动设备是8位数).
我已经尝试了两种方法(两个示例都不起作用,因为’element’没有validate方法):

第一种方法:创建自定义方法并在那里进行两种验证,但后来我必须创建自己的电子邮件和移动验证 – 我找不到如何在新方法中重用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 } });
                        }
                    }
                }
            }
        }
    }

解决方法

以下验证方法怎么样……
$.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,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,8]
      },{
        email: true
      }]
    }
  },messages: {
    input: {
      xor: "Please enter a valid email or phone number"
    }
  }
});

在这里看到它在行动http://jsfiddle.net/eJdBa/

猜你在找的jQuery相关文章