Question

我正在使用jQuery validation插件尝试根据data-属性添加规则。我正在根据data-minlength或data-maxlength添加最小/最大长度规则。这是一些HTML示例：

<form>
    <input name="input1" data-maxlength="5" data-minlength="3" required>
    <input name="input2" data-maxlength="5" required>
    <input name="input3" data-minlength="3" required>
    <button>Submit</button>
</form>

我这样做是为了添加规则并且工作正常：

$('input[data-minlength]').each(function(){
    if ($(this).data('minlength')) {
        $(this).rules("add", {
            minlength: $(this).data('minlength')
        });
    }
});

$('input[data-maxlength]').each(function(){
    if ($(this).data('maxlength')) {
        $(this).rules("add", {
            maxlength: $(this).data('maxlength')
        });
    }
});

但是我想缩短它，所以我尝试了这个并且它不起作用：

['minlength', 'maxlength'].forEach(function(item){
    $('input[data-'+item+']').each(function(){
        if ($(this).data(item)) {
            // alert(item) shows the correct rule name
            $(this).rules("add", {
                // Next line fails, but hardcoding a rule name works
                item: $(this).data(item)
            });
        }
    });
});

错误是因为$.validator.methods[method]未定义。不知怎的，它传递给它的方法名称错误，即使alert(item)告诉我规则名称是正确的。

有没有人知道为什么，或者有一个替代解决方案我可以用来缩短上面重复的工作代码？

演示：http://jsfiddle.net/kaVKe/1/

Answer 1

它不起作用，因为您正在使用名为item的新属性创建对象文字。

怎么样？

['minlength', 'maxlength'].forEach(function(item){
    $('input[data-'+item+']').each(function(){
        if ($(this).data(item)) {
            // alert(item) shows the correct rule name
            var options = {};
            options[item] = $(this).data(item);

            $(this).rules("add", options);
        }
    });
});

这将创建一个options对象并添加您需要的适当属性。

Answer 2

尝试：

['minlength', 'maxlength'].forEach(function(item){
    $('input[data-'+item+']').each(function(){
        if ($(this).data(item)) {
            var rule = {};
            rule[item] = $(this).data(item);
            $(this).rules("add", rule);
        }
    });
});

您的解决方案不起作用，因为在对象文字表示法中，属性名称不会被解释为变量：

{
  item: ... // <-- this one
}

Answer 3

你为什么不这么做？

$('input').each(function(){
    var max = $(this).data('maxlength');
    var min = $(this).data('minlength')
    if (min) {
        $(this).rules("add", {
            minlength: min 
        });
    }
    if (max) {
        $(this).rules("add", {
            maxlength: max 
        });
    }
});

在这里摆弄http://jsfiddle.net/kaVKe/2/ 我认为您的代码不起作用，因为您不能将变量用于属性名称

// Next line fails, item is always interpreted as item, not as maxlength/minlength
item: $(this).data(item)

基于循环中的数据属性添加jQuery验证规则

3 个答案: