jQuery驗證框架（七）注意事項 (jQuery validation)

jQuery驗證框架

7、注意事項

[1]複雜的name屬性值
    當使用rules選項時，若是表單的name屬性值包含有非法的javascript標識符，必須將name值加上引號。

 $("#myform").validate({
   rules: {
     // no quoting necessary
     name: "required",
     // quoting necessary!
     "user[email]": "email",
     // dots need quoting, too!
     "user.address.street": "required"
   }
 });

$("#myform").validate({
  rules: {
    // no quoting necessary
    name: "required",
    // quoting necessary!
    "user[email]": "email",
    // dots need quoting, too!
    "user.address.street": "required"
  }
});

[2]重構規則
    不論何時，當你的表單中的多個字段含有相同的驗證規則及驗證消息，重構規則能夠減小不少重複。使用 addMethod 和 addClassRules 將很是有效果。  
    假使已經重構了以下規則：

 // alias required to cRequired with new message
 $.validator.addMethod("cRequired", $.validator.methods.required,
   "Customer name required");
 // alias minlength, too
 $.validator.addMethod("cMinlength", $.validator.methods.minlength,
   // leverage parameter replacement for minlength, {0} gets replaced with 2
   $.format("Customer name must have at least {0} characters"));
 // combine them both, including the parameter for minlength
 $.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });

// alias required to cRequired with new message
$.validator.addMethod("cRequired", $.validator.methods.required,
  "Customer name required");
// alias minlength, too
$.validator.addMethod("cMinlength", $.validator.methods.minlength, 
  // leverage parameter replacement for minlength, {0} gets replaced with 2
  $.format("Customer name must have at least {0} characters"));
// combine them both, including the parameter for minlength
$.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });

    那麼使用的時候以下：

 <input name="customer1" class="customer" />
 <input name="customer2" class="customer" />
 <input name="customer3" class="customer" />

<input name="customer1" class="customer" />
<input name="customer2" class="customer" />
<input name="customer3" class="customer" />

[3]驗證消息
    當驗證了一個無效的表單元素，驗證消息顯示在用戶面前。這些消息是從哪裏來的呢？有三個途徑來取得驗證消息。
        1.經過待驗證表單元素的title屬性
        2.經過默認的驗證消息
        3.經過插件設置(messages選項)
    這三種途徑的優先順序爲：3 > 1 > 2
   
[4]驗證消息與Google工具欄的衝突
    有時候驗證消息會與Goole工具欄的AutoFill插件衝突。AutoFill經過替換表單元素的title屬性，以顯示提示消息。此時，驗證消息若是獲取的是title屬性值，那麼就得不到咱們預期想要獲得的結果。當文檔載入時，能夠經過以下方法避免衝突。

 $("input.remove_title").attr("title", "");

$("input.remove_title").attr("title", "");

[5]表單提交
    默認地，表單驗證失敗時阻止表單的提交，當驗證經過，表單提交。固然，也能夠經過submitHandler來自定義提交事件。
    將提交按鈕的class屬性設置成cancel，在表單提交時能夠跳過驗證。

 <input type="submit" name="submit" value="Submit" />
 <input type="submit" class="cancel" name="cancel" value="Cancel" />

<input type="submit" name="submit" value="Submit" />
<input type="submit" class="cancel" name="cancel" value="Cancel" />

    下面這段代碼將循環提交表單：

 $("#myform").validate({
  submitHandler: function(form) {
    // some other code maybe disabling submit button
    // then:
    $(form).submit();
  }
 });

$("#myform").validate({
 submitHandler: function(form) {
   // some other code maybe disabling submit button
   // then:
   $(form).submit();
 }
});

    $(form).submit() 觸發了另一輪的驗證，驗證後又去調用submitHandler，而後就循環了。能夠用 form.submit() 來觸發原生的表單提交事件。

 $("#myform").validate({
  submitHandler: function(form) {
    form.submit();
  }
 });