Thêm quy tắc xác thực jQuery dựa trên thuộc tính dữ liệu trong vòng lặp

Question

Tôi đang sử dụng plugin jQuery validation cố gắng thêm quy tắc dựa trên thuộc tính data-. Tôi đang thêm quy tắc min/maxlength dựa trên data-minlength hoặc data-maxlength. Dưới đây là một số mẫu 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> 

tôi đang làm điều này để thêm các quy tắc và nó làm việc tốt:

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

Nhưng tôi muốn để rút ngắn nó lên, vì vậy tôi cố gắng này và nó không làm việc:

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

Lỗi này là do $.validator.methods[method] không xác định. Bằng cách nào đó nó nhận được tên phương thức sai được truyền cho nó, mặc dù alert(item) cho tôi biết tên quy tắc là chính xác.

Có ai có bất kỳ ý tưởng nào tại sao hoặc có giải pháp thay thế mà tôi có thể sử dụng để rút ngắn mã làm việc lặp đi lặp lại ở trên không?

Demo: http://jsfiddle.net/kaVKe/1/

Answer 1

Nó không hoạt động vì bạn đang tạo một đối tượng theo nghĩa đen với thuộc tính mới được gọi là mục.

làm thế nào về điều này?

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

Điều này tạo ra một đối tượng tùy chọn và thêm thuộc tính thích hợp bạn cần.

Answer 2

Tại sao bạn không chỉ đơn giản là làm

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

fiddle đây http://jsfiddle.net/kaVKe/2/ Mã của bạn không làm việc tôi nghĩ rằng vì bạn không thể sử dụng một biến cho một tên thuộc tính

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

Answer 3

Hãy thử:

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

giải pháp của bạn không làm việc vì trong ký hiệu literal đối tượng, tên thuộc tính sẽ không được hiểu là biến:

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