Question

我正在使用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
            }
          }
       });

提前致谢。

Answer 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/

<强>文档

rules('add') method

addClassRules method

Answer 2

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

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

        first_name: {
            required: true
        },

        get last_name() {return this.first_name},

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

Answer 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变量配合使用。我想您对如何以一种优雅的方式变得懒惰有了想法；-）

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

3 个答案: