Question

我正在使用官方jQuery网站上提供的jQuery Validate Plugin来验证我的表单。一切都很顺利，直到我必须传递规则，而不是基于字段name，而是基于class或id。我无法做到这一点。

这是我如何使用name="comment"将规则传递到字段的示例。

这是我的jQuery代码

$("#comForm").validate({
    rules: {
        comment: {
            required: true,
            minlength: 5,
            maxlength: 500
        }
    }
});

这是我的表格

  <form id="comForm" action="#" method="post" >
  <textarea rows="4" name="comment" placeholder="What do you think?" class="input-xxlarge" id="defaultform"></textarea></br>
  <textarea rows="4" name="othercomment" placeholder="What do you think?" class="input-xxlarge" id="defaultform"></textarea></br>
  <input type="submit" value="Rate!" class="btn btn-primary">
  </form>

我们只想说，我希望将规则传递给默认表单id的每个字段，或者传递给input-xxlarge class的所有字段。这可能吗？

Answer 1

是的，但是你真的不应该使用重复的id ...它是无效的HTML，它会导致JavaScript问题。如果您需要重复，请使用class。

使用内置的rules()方法添加规则并按class分配。 See documentation.

然后使用jQuery的.each()方法将规则应用于使用相同class的所有匹配元素。

<强> HTML：

<form id="myform">
    <textarea class="myclass" name="field1" ></textarea>
    <textarea class="myclass" name="field2" ></textarea>
</form>

<强> jQuery的：

$('#myform').validate({
    // your other rules and options
});

// the following method must come AFTER .validate()
$('.myclass').each(function() {
    $(this).rules('add', {
        required: true,
        minlength: 5,
        maxlength: 500,
        messages: {
            required: "Required input",
            minlength: "Must be at least {0} characters",
            maxlength: "Must be less than {0} characters"
        }
    });
});

<强> Working DEMO

此外，类似于这个问题：

jQuery Validate set rule using wildcard to find target fields

Answer 2

您可以使用标准jquery选择器向以下元素添加规则：

$(".required").rules("add", { 
  required:true,  
  minlength:1
});

Answer 3

您可以通过数据规则属性应用规则。这是最简单的方法，可能是维护干净代码的最佳方式......

示例：

<input type="text" name="email" data-rule-required="true" data-rule-email="true">
<input type="text" name="password" id="passoword" data-rule-required="true" data-rule-minlength="6">
<input type="text" name="password-confirm" data-rule-required="true" data-rule-minlength="6" data-rule-equalsto="#password">

您甚至可以通过数据属性提供消息：

<input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="Please enter a valid email address" />

在JavaScript中只需致电：

$('#myform').validate();

使用jQuery Validate插件将规则传递给类

3 个答案: