基於循環中的數據屬性添加jQuery驗證規則

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); 
     } 
    }); 
}); 

這會創建一個選項對象並添加所需的適當屬性。

Answer 2

你爲什麼不乾脆做

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

Answer 3

嘗試：

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