Question

是否可以将数据属性用于JQuery Validate插件。我目前使用的是班级名称，例如

class="{required:true, messages:{required:'You must choose a site.'}}"`

但需要使用数据属性，例如

data-validate="{required:true, messages:{required:'You must choose a site.'}}"`

输入可能具有多个与之关联的数据属性，这些属性与验证无关，例如

<input name="txt_txt001" type="text" maxlength="30" id="txt_txt001" class= "     
{required:true, messages:{required:'This field is required.'} }" data-
children="ddl_txt007,ddl_txt008" data-optionGroup="1" data-optionGroupParent=""  />

我知道ketchup插件提供了这个，但不想转移到它，因为我已经把大量工作用于使用JQuery Validate进行页面设置。

由于

Answer 1

尝试进行以下操作以验证1.9.0。我做了几个mod，所以我的行号可能会关闭，但是这里有：

大约149：

var data = $.validator.normalizeRules(
    $.extend(
        {},
        $.validator.metadataRules(element),
        $.validator.classRules(element),
        $.validator.dataRules(element), // add this
        $.validator.attributeRules(element),
        $.validator.staticRules(element)
    ), element);

在ln 782周围的classRules之后添加：

// pretty much steal everything from the class based settings
dataRules: function(element) {
    var rules = {};
    var classes = $(element).data("validation");
    classes && $.each(classes.split(' '), function() {
        if (this in $.validator.classRuleSettings) {
            $.extend(rules, $.validator.classRuleSettings[this]);
        }
    });
    return rules;
},

在课程规则中添加任何其他验证器：

jQuery.validator.addClassRules({
    phone: {
        phoneUS: true
    },
    zipcode: {
        zipcode: true
    },
    notFirstSelect: {
        notFirstSelect : true
    }
});

然后在您的for字段中添加data-validation属性：

<input type="text" data-validation="zipcode required" maxlength="10" class="inputText med" value="" name="zip" id="zip">

这对我来说非常好。请查看：http://www.roomandboard.com/rnb/business_interiors/contactus/send.do以获取此示例。

Answer 2

我没有使用过插件，但似乎没有内置选项可以从获取规则的位置更改属性。但是，如果您在第767行查看未压缩的来源，您会看到classRules方法。

在第769行的此方法中有：

var classes = $(element).attr('class');

您可以尝试将其更改为：

var classes = $(element).attr('data-validate');

如上所述，我没有对此进行过测试，尽管将这类内容放在数据属性中而不是类中，这似乎更符合逻辑和语义，因为插件建议默认使用。

Answer 3

ASP.NET MVC 3使用HTML5 data-属性进行不显眼的验证。 MVC 3框架中的文件jquery.validate.unobtrusive.js解析数据属性，并将规则添加到jquery.validate.js。

您可以在this article中获得更多详细信息。

Answer 4

我知道这是旧的，但我偶然发现它寻找相关的东西。我想因为没有接受的答案你可能仍然需要一个？无论如何，大卫真的关闭：

var classes = $(element).data("validate");

这应该获取data-validate属性的内容。从那里你应该能够解析或传递你正在使用类名的值。

Answer 5

建议使用data-attriubtes。你不再需要jquery.validate.unobtrusive.js了。从版本1.11.0开始，jquery.validate.js默认包含。语法保持不变，请看这里的示例： http://denverdeveloper.wordpress.com/2012/09/26/some-things-ive-learned-about-jquery-unobtrusive-validation/

将数据属性与jquery验证一起使用

5 个答案: