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

标签 jquery jquery-validate

我有一个字段可以包含电子邮件或手机(在我的例子中手机是 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 } });
                        }
                    }
                }
            }
        }
    }

最佳答案

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

$.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/

关于jQuery 验证 - 如何使用两个 XOR 规则验证一个字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12780123/

相关文章:

Jquery验证,将错误消息放在现有元素中而不是生成<label>标签

jquery-plugins - jQuery - 为什么 ajaxForm 绕过验证过程?

jQuery Validate Unobtrusive 不适用于 TextArea

javascript - Python Selenium - 从下拉列表中滚动更新的元素内的列表中打印文本

jQuery 选择当前元素的父 li

javascript - 不一致的 jquery 按钮点击行为

jquery - Jquery 选择器的逻辑 AND

css - 如何在一种形式上正确显示客户端错误和服务器端错误?

jquery - 如何在select中隐藏选中的元素?

asp.net-mvc - Mvc jquery 验证提供哪些优势?