jQuery Validation Plugin - 添加适用于多个字段的规则答案

【问题标题】：jQuery Validation Plugin - adding rules that apply to multiple fieldsjQuery Validation Plugin - 添加适用于多个字段的规则
【发布时间】：2012-01-12 01:30:13
【问题描述】：

我正在使用jQuery Validation 插件：

我有多个大型表单字段，我想对其应用相同的规则。我已经简化了这个例子的代码。这段代码不起作用，但我想做这样的事情。第二条规则应适用于first_name 和last_name。我想将这里的所有规则都封装在这个函数中，而不是编辑某些表单元素的类列表来添加所需的类或其他任何东西。

（同样，我有几个不同的表单字段组，它们具有不同的要求，我想对它们进行分组。为简单起见，我只将required: true 放在该元素中）

$('#affiliate_signup').validate(
       {
          rules: 
          {
            email: {
                required: true,
                email: true
            },
            first_name,last_name: {
                required: true
            },
            password: {
                required: true,
                minlength: 4
            }
          }
       });

提前致谢。

【问题讨论】：

如果您觉得我的回答有帮助，请点击复选标记接受。

标签： jquery jquery-validate

【解决方案1】：

就我的示例而言，这是基本的起始代码：

HTML：

<input type="text" name="field_1" />
<input type="text" name="field_2" />
<input type="text" name="field_3" />

jQuery:

$('#myForm').validate({
    rules: {
        field_1: {
            required: true,
            number: true
        },
        field_2: {
            required: true,
            number: true
        },
        field_3: {
            required: true,
            number: true
        }
    }
});

http://jsfiddle.net/9W3F7

选项 1a) 您可以提取规则组并将它们组合成公共变量。

var ruleSet1 = {
        required: true,
        number: true
    };

$('#myForm').validate({
    rules: {
        field_1: ruleSet1,
        field_2: ruleSet1,
        field_3: ruleSet1
    }
});

http://jsfiddle.net/9W3F7/1

选项 1b) 与上述 1a 相关，但取决于您的复杂程度，可以分离出某些组共有的规则，并使用.extend() 以无数种方式重新组合它们.

var ruleSet_default = {
        required: true,
        number: true
    };

var ruleSet1 = {
        max: 99
    };
$.extend(ruleSet1, ruleSet_default); // combines defaults into set 1

var ruleSet2 = {
        min: 3
    };
$.extend(ruleSet2, ruleSet_default); // combines defaults into set 2

$('#myForm').validate({
    rules: {
        field_1: ruleSet2,
        field_2: ruleSet_default,
        field_3: ruleSet1
    }
});

最终结果：

field_1 是不小于 3 的必填数字。
field_2 只是一个必填数字。
field_3 是不大于 99 的必填数字。

http://jsfiddle.net/9W3F7/2

选项 2a) 您可以根据所需的通用规则将类分配给您的字段，然后将这些规则分配给类。使用addClassRules 方法，我们将复合规则转化为类名。

HTML：

<input type="text" name="field_1" class="num" />
<input type="text" name="field_2" class="num" />
<input type="text" name="field_3" class="num" />

jQuery:

$('#myform').validate({ // initialize the plugin
    // other options
});

$.validator.addClassRules({
    num: {
        required: true,
        number: true
    }
});

http://jsfiddle.net/9W3F7/4/

选项 2b) 与选项 2a 的主要区别在于，您可以使用它来为动态创建的输入元素分配规则，方法是在创建后立即调用 rules('add') 方法。您可以使用class 作为选择器，但这不是必需的。正如您在下面看到的，我们使用了通配符选择器而不是 class。

.rules() 方法必须在任何时间在调用 .validate() 之后调用。

jQuery:

$('#myForm').validate({
    // your other plugin options
});

$('[name*="field"]').each(function() {
    $(this).rules('add', {
        required: true,
        number: true
    });
});

http://jsfiddle.net/9W3F7/5/

文档：

【讨论】：

感谢您花时间概述所有选项！
我通常从不赞成，但我也赞成。非常翔实，正是我所需要的。谢谢。
@sparky 我很想知道如何在（选项 1a）中编写错误消息：")
@AsmaaAlharbi，关于messages 选项，选项 1a 没有什么特别之处。请参阅此处的文档：jqueryvalidation.org/validate#messages
很好的答案。很多细节和解释。谢谢。

【解决方案2】：

您可以通过这种方式使用“getter”语法：

   {
      rules: 
      {
        email: {
            required: true,
            email: true
        },

        first_name: {
            required: true
        },

        get last_name() {return this.first_name},

        password: {
            required: true,
            minlength: 4
        }
      }
   }

【讨论】：

【解决方案3】：

如果我理解正确的话，您想将许多规则应用于许多领域，在某些规则上可能会有所不同，但您又懒得在其他领域重复使用相同的规则。但是，使用 jQuery validate 可以在一个输入字段上设置多个规则。只需在此处使用数组表示法。

要实现您的用例，只需将data 属性添加到每个输入字段以及您要应用的规则。在最好的情况下，使用 url 编码的 json 格式，这样每个输入字段只需要一个 data 属性。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>validate test</title>
</head>
<body>
<form id="myForm" name="myForm" method="post" action="www.example.com/my-url">
    <input type="text" name="txt1" data-rules="%7B%22required%22%3Atrue%2C%22minlength%22%3A2%2C%22maxlength%22%3A10%7D" />
    <input type="text" name="txt2" data-rules="%7B%22required%22%3Atrue%2C%22minlength%22%3A2%2C%22maxlength%22%3A10%7D" />
    <input type="number" name="number1" data-rules="%7B%22required%22%3Atrue%2C%22number%22%3Atrue%2C%22min%22%3A1%2C%22max%22%3A999%7D" />
    <input type="email" name="email1" data-rules="%7B%22required%22%3Atrue%2C%22email%22%3Atrue%2C%22minlength%22%3A20%7D" />
    <input type="email" name="email2" data-rules="%7B%22required%22%3Atrue%2C%22email%22%3Atrue%2C%22minlength%22%3A20%7D" />
</form>
<script type="text/javascript">
    var $field = null;
    var rules = {};

    $('#myForm input, #myForm textarea').each(function (index, field) {
        $field = $(field);
        rules[$field.attr('name')] = JSON.parse(decodeURIComponent($field.attr('data-rules')));
    });

    $('#myForm').validate(rules);
</script>
</body>
</html>

这背后的基本技术很简单：

使用 `data-`` 属性创建您的字段。
循环遍历每个输入字段以获取您要对其应用的规则。
将收集的规则应用于表单元素

您也可以通过这种方式使用具有相同验证器的输入组，例如。 G。通过使用它的类和带有规则对象的预定义 JavaScript 变量。我认为您知道如何以优雅的方式变得懒惰；-)

【讨论】：