摘要：默認值原生的表單提交類型表單驗證通過后提交表單的回調函數。使用去控制這個組的驗證信息被放置的位置。例子禁用對焦驗證。他的回調函數被傳入兩個參數類型元素這個元素是當前正在被驗證的，是一個元素。此函數的上下午為驗證對象本身。

Validation作為表單驗證中最常用的插件，為我在開發過程中提供了很多便利的地方。雖然說我很常用，但是我真的不敢說我會用Validation。每次使用都是在菜鳥教程上粘貼代碼，修改rule就這么用了。所以自己決定還是從頭擼一遍文檔，但是沒找到中文文檔。這就有了翻譯這個文檔的意愿了，那就開始吧。官方文檔的位置

使用下菜鳥教程的cdn，因為依賴jquery，所以必須先引入jquery

根據表單控件的類型和屬性進行校驗，這樣比較不靈活

將校驗規則寫到js代碼中

$("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "請輸入您的名字",
      lastname: "請輸入您的姓氏",
      username: {
        required: "請輸入用戶名",
        minlength: "用戶名必需由兩個字母組成"
      },
      password: {
        required: "請輸入密碼",
        minlength: "密碼長度不能小于 5 個字母"
      },
      confirm_password: {
        required: "請輸入密碼",
        minlength: "密碼長度不能小于 5 個字母",
        equalTo: "兩次密碼輸入不一致"
      },
      email: "請輸入一個正確的郵箱",
      agree: "請接受我們的聲明",
      topic: "請選擇兩個主題"
    }
});

每個表單空間多帶帶的進行配置，配置對象中的rule用于設置校驗標準，messages用于設置校驗錯誤的提示信息。

validate是Validation的主函數，用于驗證選擇的表單。

類型：object

debug（默認值：false）
類型：boolean
允許debug模式。如果他設置為true，表單不會被提交而且驗證的錯誤信息將在控制臺被輸出。
例子：組織表單進行提交，設置提示驗證信息和debug信息。

$("#myform").validate({
  debug: true
});

submitHandler（默認值：原生的表單提交）
類型：function()
表單驗證通過后提交表單的回調函數。
例子：當表單驗證后使用ajax提交表單。

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

例子：使用回調函數先執行部分操作然后再提交表單。注意：參數中的form對應的是一個DOM元素，而且這里提交不會再次出發此回調函數。

$("#myform").validate({
  submitHandler: function(form) {
    // 表單提交前的操作
    form.submit();
  }
});

此回調有兩個參數：

form

類型：DOM元素
當前被驗證的form表單元素。

event

類型：事件對象
表單提交的事件

invalidHandle
類型：function()
當表格沒有通過驗證提交時的回調函數
例子：當用戶嘗試提交一個驗證無效的表單時，在表格內顯示一個展示有多少錯誤信息

$("#myform").validate({
  invalidHandler: function(event, validator) {
// "this" refers to the form
var errors = validator.numberOfInvalids();
    if (errors) {
      var message = errors == 1
        ? "You missed 1 field. It has been highlighted"
        : "You missed " + errors + " fields. They have been highlighted";
      $("div.error span").html(message);
      $("div.error").show();
    } else {
      $("div.error").hide();
    }
  }
});

此回調函數有兩個參數：

event
類型：事件對象

一個自定義事件對象，因為該函數被綁定為一個事件處理程序。

validator
類型：Validator

當前表單驗證的實例。

ignore（默認值：ignore）
類型：css選擇器
當驗證的時候，將選擇器元素過濾出來不進行校驗。使用jquery的not()方法，所以被過濾的表單空間不進行校驗。type值為submit和reset的input元素也被過濾掉，他們都是被被禁的元素。
例子：當校驗的時候過濾掉帶有“ignore”類名的元素

$("#myform").validate({
  ignore: ".ignore"
});

rules（默認值：校驗規則從標簽的類名、屬性、數據中）
類型：對象
鍵值對定義用戶的校驗規則。鍵對應的元素（或者一組的復選框/單選框）的name屬性，值是一個對象含有規則/鍵值對或字符串組成。可以與類名、屬性、數據中的校驗規則并用。每個規則都可以定義為一個含有depends屬性，用于與符合某些條件的規則。看下面第二個例子能更清楚這種規則定義方式。
例子：定義一個必填的name元素和一個必填的email元素（使用簡便方式）和有一個有效的email地址。

$("#myform").validate({
  rules: {
    // simple rule, converted to {required:true}
    name: "required",
    // compound rule
    email: {
      required: true,
      email: true
    }
  }
});

例子：定義一個必填email地址的contact元素，最后取決于一個復選框是否選中來驗證email規則

$("#myform").validate({
  rules: {
    contact: {
      required: true,
      email: {
        depends: function(element) {
          return $("#contactform_email").is(":checked");
        }
      }
    }
  }
});

例子：配置一個規則需要一個參數，且有一個依賴的回調函數

$("#myform").validate({
  rules: {
 // at least 15€ when bonus material is included
 pay_what_you_want: {
   required: true
   min: {
     // min needs a parameter passed to it
     param: 15,
     depends: function(element) {
       return $("#bonus-material").is(":checked");
     }
   }
 }
  }
});

messages(默認值：被使用的驗證規則的默認驗證信息)
類型：對象
鍵值對的形式定義自定義信息。鍵是驗證元素的name值，值是這個元素顯示出的驗證信息。值除了是一個單純的字符串，也可以是對應此元素每個驗證規則的對象。重載一個元素的默認驗證信息（通過這個方式）。每message可能是一個字符串或者是一個函數。這個函數被調用在validator的作用域內，這個函數的第一個參數是驗證規則中的參數，第二個參數是驗證的元素，而且必須返回一個字符串作為驗證信息。
例子：定義一個必填的name元素和一個必填的驗證email規則的元素。一個簡單的信息對應必填的name元素，兩個信息對應email元素。

$("#myform").validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    name: "Please specify your name",
    email: {
      required: "We need your email address to contact you",
      email: "Your email address must be in the format of name@domain.com"
    }
  }
});

例子：校驗name元素規則為必填和至少兩個字符。提供一個函數信息使用jquery.validataor.format以避免在兩個地方指定參數。

$("#myform").validate({
  rules: {
    name: {
      required: true,
      minlength: 2
    }
  },
  messages: {
    name: {
      required: "We need your email address to contact you",
      minlength: jQuery.validator.format("At least {0} characters required!")
    }
  }
});

groups
類型：對象
定義錯誤信息的組。一個組包含作為鍵的任意組名和一個用空格分隔的元素name的字符串列表作為值。使用errorPlaement去控制這個組的驗證信息被放置的位置。
例子：用一個table布局form元素，放置錯誤信息在下一個單元input之后。

$("#myform").validate({
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
    if (element.attr("name") == "fname" || element.attr("name") == "lname" ) {
      error.insertAfter("#lastname");
    } else {
      error.insertAfter(element);
    }
  }
});

normalizer
類型：函數
為驗證，預處理或轉換元素的值。這個放在后面詳細說。

onsubmit(默認值：true)
類型：bool
在表單提交的時候進行驗證。設置false時只能其他事件引起驗證。
設置成函數可以設何時執行驗證。
一個布爾值的true不是一個有效值，就是true無需設置。
例子：當表單提交的不驗證，允許用戶使用自定義的方式提交。包括按鍵、失去焦點、點擊事件等。

$("#myform").validate({
  onsubmit: false
});

onfocusout
類型：布爾或者函數
校驗元素（除了checkboxes或者radio按鈕）在失去焦點的時候。如果這個元素沒有輸入任何內容，則跳過所有規則，除非這個元素已經被標記為錯誤。
設置一個函數去界定何時進行校驗。
一個true值不是一個有效的值。
例子：禁用對焦驗證。

$("#myform").validate({
  onfocusout: false
});

他的回調函數被傳入兩個參數：

element
類型：元素

這個元素是當前正在被驗證的，是一個dom元素。

event
類型：時間對象

這個失去焦點的事件對象。

onkeyup
類型：布爾值或者函數
驗證元素在釋放按鍵的時候。當沒有表單元素標記為無效的時候，也不會發生。除上述情況之外，所有的規則將被每次按鍵事件所引起。設置false將禁止。
設置一個函數去界定何時進行校驗。
一個true值不是一個有效的值。
例子：禁止按鈕驗證

$("#myform").validate({
  onkeyup: false
});

這個回調函數被傳兩個參數：

元素
類型：元素

這個元素是當前正在被驗證的，是一個dom元素。

event
類型：時間對象

這個按鍵的事件對象。

onkeyup
校驗checkboxes、radio按鈕，和select元素在click事件。設置false時去禁止。
設置一個函數去界定何時進行校驗。
一個true值不是一個有效的值。
例子：禁止點擊校驗checkboxes、radio按鈕和select元素。

$("#myform").validate({
  onclick: false
});

元素
類型：元素

這個元素是當前正在被驗證的，是一個dom元素。

event
類型：時間對象

這個點擊的事件對象。

focusinvalid
類型：布爾值
聚焦最后一個激活的元素或者第一個驗證無效的元素，通過使用validator.focusinvalid()方法。最后一個被激活的元素是表單提交的時候最后一個聚焦的元素，阻止他失去焦點。如果沒有一個元素被聚焦他將會獲取表單中第一個元素，除非這個配置為false。
例子：禁止聚焦無效的元素。

$("#myform").validate({
  focusInvalid: false
});

focusCleanup（默認值為：false）
類型：布爾值
如果設置為enabled，移除錯誤信息的css類名和隱藏所有的錯誤信息，當此元素被聚焦的時候。防止聯合focusinvalid一起使用。
例子：在聚焦表單元素的時候，移除錯誤的css類名和隱藏錯誤信息。

$("#myform").validate({
  errorClass: "invalid"
});

errorClass（默認值為："error"）
類型：字符串
使用這個類名創建標簽，查找錯誤的標簽并添加到錯誤的元素。
例子：設置錯誤的類名為"invalid"

$("#myform").validate({
  errorClass: "invalid"
});

validClass（默認值為："valid"）
類型：字符串
這個類名是增加到表單元素，在這個元素被驗證認定為有效的之后。
例子：設置有效的類名為"success"

$("#myform").validate({
  validClass: "success"
});

errorElement（默認值為："label"）
類型：字符串
使用這個標簽類型去創建錯誤信息提示。默認的是label，這樣的好處是可以用for屬性創建一個意思明確的鏈接在錯誤信息和字段。
例子:設置錯誤的標簽類型為"em"。

$("#myform").validate({
  errorElement: "em"
});

wrapper（默認值為：window）
類型：字符串
包裹錯誤標簽用此屬性定義的標簽。結合errorLabelContainer屬性創建一個錯誤信息列表。
例子：包裹每個錯誤元素使用li標簽，創建一個錯誤信息列表。

$("#myform").validate({
  wrapper: "li"
});

errorLabelContainer
類型：css選擇器
隱藏和展示驗證時的容器
例子：所有的錯誤的標簽被展示在一個id為‘messageBox’無序列表,通過errorContainer選項傳遞的選擇器指定元素中。所有的錯誤元素被包裹在一個li元素中，制成一個信息列表。

$("#myform").validate({
  errorLabelContainer: "#messageBox",
  wrapper: "li",
  submitHandler: function() { alert("Submitted!") }
});

errorContainer
類型：css選擇器
隱藏和展示驗證時的容器
例子：使用一個額外的容器包裹錯誤信息。當驗證錯誤的時候，這個元素將所有的錯誤信息顯示和隱藏。然而，錯誤標簽本身被添加到作為errorLabelContainer給出的元素，這里是無序列表。 因此，錯誤標簽也被包裝到li元素（包裝選項）中。

$("#myform").validate({
  errorContainer: "#messageBox1, #messageBox2",
  errorLabelContainer: "#messageBox1 ul",
  wrapper: "li", debug:true,
  submitHandler: function() { alert("Submitted!") }
});

showErrors
類型：函數
一個自定義信息展示的回調函數。獲取錯誤信息的對象作為第一個參數，一個錯誤信息的數組作為第二個。此函數的上下午為驗證對象本身。這些參數只包含當前已經驗證過的元素，當在focusout或keyup上進行驗證時，它們可以是單個元素。可以通過調用this.defaultShowErrors（）來觸發（除了自己的消息）默認行為。
例子：每次一個錯誤信息呢被展示的時候更新無效元素的數量。伴隨著默認的錯誤信息的展示。

$("#myform").validate({
  showErrors: function(errorMap, errorList) {
    $("#summary").html("Your form contains "
      + this.numberOfInvalids()
      + " errors, see details below.");
    this.defaultShowErrors();
  }
});

errorMap
類型：對象

鍵值對，對象的鍵是校驗的input元素name，而值是顯示的校驗信息。

errorList
類型：數組

一個包含當前已經被校驗過的元素的數組。包含的對象有兩個屬性

- message
類型：字符串
input元素展示的驗證信息
- element
類型：元素
此條目的dom節點

errorPlacement （默認值為：放置錯誤信息的標簽在無效的input元素后面）
類型：函數
自定義產生的錯誤驗證標簽的位置。第一個參數產生的驗證錯誤信息的jquery對象。第二個參數是驗證無效的input元素的jquery對象。
例子：使用一個table來布局form表單，防止錯誤信息在input后的td里。

$("#myform").validate({
  errorPlacement: function(error, element) {
    error.appendTo( element.parent("td").next("td") );
  }
});

這個回調函數有兩個參數：

error
類型：jquery對象

要插入DOM中的錯誤標簽。

element
類型：jquery對象

驗證信息對應的已經驗證input元素，用于error的定位。

success
類型：字符串或函數
如果已經定義，將產生一個對有效input元素的驗證信息。如果是賦值的是字符串，則將給這個驗證信息的標簽加上一個class類名。如果賦值是函數，這個驗證信息標簽的jquery是第一個參數，第二個參數是被驗證的input元素（注意是dom元素）。可以對驗證信息進行修改文字。
例子：添加一個"valid"類名到驗證信息的元素，使用css控制樣式。

$("#myform").validate({
  success: "valid",
  submitHandler: function() { alert("Submitted!") }
});

例子：添加一個"valid"類名到驗證信息的元素，通過css控制演示，并且添加文字‘ok！’

$("#myform").validate({
  success: function(label) {
    label.addClass("valid").text("Ok!")
  },
  submitHandler: function() { alert("Submitted!") }
});

這個回調函數傳入兩個參數：

label
類型：jquery

驗證信息標簽，使用它可以添加class類名和替換文本內容。

element
類型：dom元素

當前驗證通過的表單元素對應的dom元素。

highlight（默認值：添加errorClass（在option中設置）到表單元素）
類型：函數
設置無效表單元素如何高亮。
例子：通過先淡出再淡入的效果高亮一個驗證無效的元素。

$("#myform").validate({
  highlight: function(element, errorClass) {
    $(element).fadeOut(function() {
      $(element).fadeIn();
    });
  }
});

例子：添加一個error class到他的驗證無效元素和驗證信息

$("#myform").validate({
  highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
      .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
      .removeClass(errorClass);
  }
});

這個回調函數傳入三個參數：

element
類型：DOM元素

當前驗證無效的表單元素。

errorClass
類型：字符串

option中errorClass當前值。

validClass
類型：字符串

option中validClass當前值。

unhighlight（默認值：移除errorClass）
類型：函數
設置失去聚焦的回調函數，參數與highlight相同。

ignoreTitle（默認值：false）
類型：布爾值

檢查是否符合驗證規則，使用這個方法的之前必須對form元素執行validate()。
例子：設置一個form表單的驗證規則，然后檢查表單是否符合驗證規則在點擊按鈕之后。

  
  

  Validate!

讀取、添加和移除一個元素的規則。

rules()
這個方法不用任何參數。讀取這個表單元素的驗證規則。

rules("add",rules)

add
類型：字符串

rules
類型：對象

添加的驗證規則。接受validate方法中相同格式的驗證規則。

rules("remove",rules)

remove
類型：字符串

rules
類型：對象

設置為用空格隔開的規則名稱字符串，則會刪除這些規則并返回。如果沒有設置的話，移除所有的規則并返回。