jQuery Validation Plugin - thêm quy tắc áp dụng cho nhiều lĩnh vực

Question

Tôi đang sử dụng plugin jQuery Validation:

Tôi có một số lĩnh vực trong một hình thức lớn mà tôi muốn áp dụng các quy tắc tương tự để. Tôi đã đơn giản hóa mã cho ví dụ này. Mã này không hoạt động, nhưng tôi muốn làm một cái gì đó như thế này. Quy tắc thứ hai nên áp dụng cho cả hai số first_name và last_name. Tôi muốn đóng gói tất cả các quy tắc ở đây trong hàm này và không chỉnh sửa danh sách lớp của một số phần tử biểu mẫu để thêm một lớp được yêu cầu hoặc bất kỳ thứ gì.

(Một lần nữa, tôi có các nhóm khác nhau các trường biểu mẫu với các yêu cầu khác nhau mà tôi muốn nhóm. Tôi chỉ đưa required: true trong yếu tố đó vì đơn giản)

$('#affiliate_signup').validate(
     { 
      rules: 
      { 
      email: { 
       required: true, 
       email: true 
      }, 
      first_name,last_name: { 
       required: true 
      }, 
      password: { 
       required: true, 
       minlength: 4 
      } 
      } 
     }); 

Cảm ơn trước.

Answer 1

Theo mục đích của ví dụ của tôi, đây là cơ sở mã bắt đầu:

HTML:

<input type="text" name="field_1" /> 
<input type="text" name="field_2" /> 
<input type="text" name="field_3" /> 

jQuery:

$('#myForm').validate({ 
    rules: { 
     field_1: { 
      required: true, 
      number: true 
     }, 
     field_2: { 
      required: true, 
      number: true 
     }, 
     field_3: { 
      required: true, 
      number: true 
     } 
    } 
}); 

http://jsfiddle.net/9W3F7

---

Tùy chọn 1a) Bạn có thể rút ra các nhóm quy tắc và kết hợp chúng thành các biến chung.

var ruleSet1 = { 
     required: true, 
     number: true 
    }; 

$('#myForm').validate({ 
    rules: { 
     field_1: ruleSet1, 
     field_2: ruleSet1, 
     field_3: ruleSet1 
    } 
}); 

http://jsfiddle.net/9W3F7/1

---

Lựa chọn 1b) Liên quan đến 1a trên nhưng tùy thuộc vào trình độ của bạn phức tạp, có thể tách ra các quy tắc chung cho các nhóm nhất định và sử dụng .extend() để tái kết hợp chúng trong một số cách vô hạn.

var ruleSet_default = { 
     required: true, 
     number: true 
    }; 

var ruleSet1 = { 
     max: 99 
    }; 
$.extend(ruleSet1, ruleSet_default); // combines defaults into set 1 

var ruleSet2 = { 
     min: 3 
    }; 
$.extend(ruleSet2, ruleSet_default); // combines defaults into set 2 

$('#myForm').validate({ 
    rules: { 
     field_1: ruleSet2, 
     field_2: ruleSet_default, 
     field_3: ruleSet1 
    } 
}); 

End Result:

• field_1 sẽ có một số đòi hỏi không ít hơn 3.

• field_2 sẽ chỉ là một số yêu cầu.

• field_3 sẽ có một số yêu cầu không lớn hơn 99.

http://jsfiddle.net/9W3F7/2

---

Lựa chọn 2a) Bạn có thể gán các lớp học để các lĩnh vực của bạn dựa trên các quy tắc thông thường cần thiết rồi chỉ định các quy tắc đó cho các lớp. Sử dụng phương pháp addClassRules, chúng tôi đang sử dụng các quy tắc phức hợp và biến chúng thành tên lớp.

HTML:

<input type="text" name="field_1" class="num" /> 
<input type="text" name="field_2" class="num" /> 
<input type="text" name="field_3" class="num" /> 

jQuery:

$('#myform').validate({ // initialize the plugin 
    // other options 
}); 

$.validator.addClassRules({ 
    num: { 
     required: true, 
     number: true 
    } 
}); 

http://jsfiddle.net/9W3F7/4/

---

Lựa chọn 2b) Sự khác biệt chính từ tùy chọn 2a là bạn có thể sử dụng để gán quy tắc để tạo động các yếu tố đầu vào bằng cách gọi rules('add') phương pháp ngay lập tức sau khi bạn tạo chúng. Bạn có thể sử dụng class làm công cụ chọn, nhưng không bắt buộc. Như bạn có thể thấy bên dưới, chúng tôi đã sử dụng công cụ chọn ký tự đại diện thay vì class.

Các .rules() phương pháp phải được gọi bất cứ lúc nào sau gọi .validate().

jQuery:

$('#myForm').validate({ 
    // your other plugin options 
}); 

$('[name*="field"]').each(function() { 
    $(this).rules('add', { 
     required: true, 
     number: true 
    }); 
}); 

http://jsfiddle.net/9W3F7/5/

---

Tài liệu:

• rules('add') method

• addClassRules method

Answer 2

Bạn có thể sử dụng cú pháp 'getter' theo cách này:

{ 
     rules: 
     { 
     email: { 
      required: true, 
      email: true 
     }, 

     first_name: { 
      required: true 
     }, 

     get last_name() {return this.first_name}, 

     password: { 
      required: true, 
      minlength: 4 
     } 
     } 
    }