具有多个规则的 jQuery 表单验证插件答案

【问题标题】：jQuery Form Validation plugin with multiple rules具有多个规则的 jQuery 表单验证插件
【发布时间】：2014-01-16 17:28:07
【问题描述】：

我正在使用 jQueryValidation 插件。问题：我想在一个输入字段中使用多个模式规则。例如：

$("form").validate({
 rules: {
    "email": {
        required: true,
        email: true
    },
    "password": {
        required: true,
        pattern: /^[A-Za-z0-9\w]{4,20}/,
        pattern: /^[\d\w\xC4\xD6\xDC\xE4\xF6\xFC\xDF]*$/
    }
 }
});

会发生什么：插件仅测试第二个模式规则。例如。输入类似 "tst" 的东西是有效的（因为这符合秒模式），尽管它违反了第一个模式规则。

据我了解此插件中的规则逻辑，所有规则都必须返回 TRUE 才能验证表单。

【问题讨论】：

一个 javascript 对象不能有 2 个相同的键，第二个实例将首先覆盖。您将需要为第二种模式添加自己的方法或将两者组合成一个正则表达式

标签： jquery jquery-validate

【解决方案1】：

您不能使用相同的 key:value 对两次，因为第二个实例将覆盖第一个实例。

你有几个选择。

将两个正则表达式合并为一个。一种方法将声明一条错误消息。因此，您将使用.addMethod() 方法创建自己的自定义规则，而不是使用additional-methods.js 文件中的pattern 规则/方法。
不要组合正则表达式模式，而是使用pattern 规则一次，然后使用.addMethod() 创建第二个新规则。

见：http://jqueryvalidation.org/jQuery.validator.addMethod/

我会创建一个专用于每个正则表达式模式的自定义方法，并给它一个语义相关的名称，例如“电子邮件”、“电话”、“字母数字”、“IP”等。（这也是这个插件在内部处理所有正则表达式评估规则的方式。）

jQuery.validator.addMethod("foo", function(value, element) {
    return this.optional(element) || /^[A-Za-z0-9\w]{4,20}/.test(value);
}, "Your entered data is not foo");

jQuery.validator.addMethod("bar", function(value, element) {
    return this.optional(element) || /^[\d\w\xC4\xD6\xDC\xE4\xF6\xFC\xDF]*$/.test(value);
}, "Your entered data is not bar");

这样声明...

"password": {
    required: true,
    foo: true,
    bar: true
}

【讨论】：