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

我正在使用插件尝试添加基于

数据-

属性的规则。我正在根据

data minlength

或

data maxlength

添加min/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>

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

['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）

告诉我规则名称是正确的，但它还是以某种方式将错误的方法名称传递给了它

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

---

演示：

你为什么不直接做呢

$('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 
        });
    }
});

在这里拉小提琴 我认为您的代码不起作用，因为您不能将变量用作属性名

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

---

它不起作用，因为您正在使用名为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);
        }
    });
});

这将创建一个选项对象并添加所需的正确属性。

请尝试：

['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
}

{
item:…//效果很好，谢谢。我知道这是我的问题所在。谢谢你的解决方法。不管每个输入是否有属性，循环都不会比使用更具体的选择器慢很多吗？我想我会测试一下，看看。@Madmartigan，这取决于输入的数量，它是正确的可能是的，但是选择输入按属性过滤也没有那么快…当输入包含至少一个属性时，您可以添加一个类服务器端，并使用Classic过滤输入。我已经接受了另一个答案，因为我认为它更清楚地突出了我的错误，但这实际上可能是我使用的，因为我有一个将其他
数据-
规则稍加修改，因此我最终需要循环使用更多输入。最好只做一次。非常感谢。谢谢，我知道这是一些基本的东西。Javascript不是我的强项，我感谢您的快速解释。
{
  item: ... // <-- this one
}