摘要：默認(rèn)值原生的表單提交類型表單驗(yàn)證通過后提交表單的回調(diào)函數(shù)。使用去控制這個(gè)組的驗(yàn)證信息被放置的位置。例子禁用對(duì)焦驗(yàn)證。他的回調(diào)函數(shù)被傳入兩個(gè)參數(shù)類型元素這個(gè)元素是當(dāng)前正在被驗(yàn)證的，是一個(gè)元素。此函數(shù)的上下午為驗(yàn)證對(duì)象本身。

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

使用下菜鳥教程的cdn，因?yàn)橐蕾噅query，所以必須先引入jquery

根據(jù)表單控件的類型和屬性進(jìn)行校驗(yàn)，這樣比較不靈活

將校驗(yàn)規(guī)則寫到j(luò)s代碼中

$("#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: "請(qǐng)輸入您的名字",
      lastname: "請(qǐng)輸入您的姓氏",
      username: {
        required: "請(qǐng)輸入用戶名",
        minlength: "用戶名必需由兩個(gè)字母組成"
      },
      password: {
        required: "請(qǐng)輸入密碼",
        minlength: "密碼長度不能小于 5 個(gè)字母"
      },
      confirm_password: {
        required: "請(qǐng)輸入密碼",
        minlength: "密碼長度不能小于 5 個(gè)字母",
        equalTo: "兩次密碼輸入不一致"
      },
      email: "請(qǐng)輸入一個(gè)正確的郵箱",
      agree: "請(qǐng)接受我們的聲明",
      topic: "請(qǐng)選擇兩個(gè)主題"
    }
});

每個(gè)表單空間多帶帶的進(jìn)行配置，配置對(duì)象中的rule用于設(shè)置校驗(yàn)標(biāo)準(zhǔn)，messages用于設(shè)置校驗(yàn)錯(cuò)誤的提示信息。

validate是Validation的主函數(shù)，用于驗(yàn)證選擇的表單。

類型：object

debug（默認(rèn)值：false）
類型：boolean
允許debug模式。如果他設(shè)置為true，表單不會(huì)被提交而且驗(yàn)證的錯(cuò)誤信息將在控制臺(tái)被輸出。
例子：組織表單進(jìn)行提交，設(shè)置提示驗(yàn)證信息和debug信息。

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

submitHandler（默認(rèn)值：原生的表單提交）
類型：function()
表單驗(yàn)證通過后提交表單的回調(diào)函數(shù)。
例子：當(dāng)表單驗(yàn)證后使用ajax提交表單。

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

例子：使用回調(diào)函數(shù)先執(zhí)行部分操作然后再提交表單。注意：參數(shù)中的form對(duì)應(yīng)的是一個(gè)DOM元素，而且這里提交不會(huì)再次出發(fā)此回調(diào)函數(shù)。

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

此回調(diào)有兩個(gè)參數(shù)：

form

類型：DOM元素
當(dāng)前被驗(yàn)證的form表單元素。

event

類型：事件對(duì)象
表單提交的事件

invalidHandle
類型：function()
當(dāng)表格沒有通過驗(yàn)證提交時(shí)的回調(diào)函數(shù)
例子：當(dāng)用戶嘗試提交一個(gè)驗(yàn)證無效的表單時(shí)，在表格內(nèi)顯示一個(gè)展示有多少錯(cuò)誤信息

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

此回調(diào)函數(shù)有兩個(gè)參數(shù)：

event
類型：事件對(duì)象

一個(gè)自定義事件對(duì)象，因?yàn)樵摵瘮?shù)被綁定為一個(gè)事件處理程序。

validator
類型：Validator

當(dāng)前表單驗(yàn)證的實(shí)例。

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

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

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

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

例子：定義一個(gè)必填email地址的contact元素，最后取決于一個(gè)復(fù)選框是否選中來驗(yàn)證email規(guī)則

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

例子：配置一個(gè)規(guī)則需要一個(gè)參數(shù)，且有一個(gè)依賴的回調(diào)函數(shù)

$("#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(默認(rèn)值：被使用的驗(yàn)證規(guī)則的默認(rèn)驗(yàn)證信息)
類型：對(duì)象
鍵值對(duì)的形式定義自定義信息。鍵是驗(yàn)證元素的name值，值是這個(gè)元素顯示出的驗(yàn)證信息。值除了是一個(gè)單純的字符串，也可以是對(duì)應(yīng)此元素每個(gè)驗(yàn)證規(guī)則的對(duì)象。重載一個(gè)元素的默認(rèn)驗(yàn)證信息（通過這個(gè)方式）。每message可能是一個(gè)字符串或者是一個(gè)函數(shù)。這個(gè)函數(shù)被調(diào)用在validator的作用域內(nèi)，這個(gè)函數(shù)的第一個(gè)參數(shù)是驗(yàn)證規(guī)則中的參數(shù)，第二個(gè)參數(shù)是驗(yàn)證的元素，而且必須返回一個(gè)字符串作為驗(yàn)證信息。
例子：定義一個(gè)必填的name元素和一個(gè)必填的驗(yàn)證email規(guī)則的元素。一個(gè)簡單的信息對(duì)應(yīng)必填的name元素，兩個(gè)信息對(duì)應(yīng)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"
    }
  }
});

例子：校驗(yàn)name元素規(guī)則為必填和至少兩個(gè)字符。提供一個(gè)函數(shù)信息使用jquery.validataor.format以避免在兩個(gè)地方指定參數(shù)。

$("#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
類型：對(duì)象
定義錯(cuò)誤信息的組。一個(gè)組包含作為鍵的任意組名和一個(gè)用空格分隔的元素name的字符串列表作為值。使用errorPlaement去控制這個(gè)組的驗(yàn)證信息被放置的位置。
例子：用一個(gè)table布局form元素，放置錯(cuò)誤信息在下一個(gè)單元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
類型：函數(shù)
為驗(yàn)證，預(yù)處理或轉(zhuǎn)換元素的值。這個(gè)放在后面詳細(xì)說。

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

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

onfocusout
類型：布爾或者函數(shù)
校驗(yàn)元素（除了checkboxes或者radio按鈕）在失去焦點(diǎn)的時(shí)候。如果這個(gè)元素沒有輸入任何內(nèi)容，則跳過所有規(guī)則，除非這個(gè)元素已經(jīng)被標(biāo)記為錯(cuò)誤。
設(shè)置一個(gè)函數(shù)去界定何時(shí)進(jìn)行校驗(yàn)。
一個(gè)true值不是一個(gè)有效的值。
例子：禁用對(duì)焦驗(yàn)證。

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

他的回調(diào)函數(shù)被傳入兩個(gè)參數(shù)：

element
類型：元素

這個(gè)元素是當(dāng)前正在被驗(yàn)證的，是一個(gè)dom元素。

event
類型：時(shí)間對(duì)象

這個(gè)失去焦點(diǎn)的事件對(duì)象。

onkeyup
類型：布爾值或者函數(shù)
驗(yàn)證元素在釋放按鍵的時(shí)候。當(dāng)沒有表單元素標(biāo)記為無效的時(shí)候，也不會(huì)發(fā)生。除上述情況之外，所有的規(guī)則將被每次按鍵事件所引起。設(shè)置false將禁止。
設(shè)置一個(gè)函數(shù)去界定何時(shí)進(jìn)行校驗(yàn)。
一個(gè)true值不是一個(gè)有效的值。
例子：禁止按鈕驗(yàn)證

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

這個(gè)回調(diào)函數(shù)被傳兩個(gè)參數(shù)：

元素
類型：元素

這個(gè)元素是當(dāng)前正在被驗(yàn)證的，是一個(gè)dom元素。

event
類型：時(shí)間對(duì)象

這個(gè)按鍵的事件對(duì)象。

onkeyup
校驗(yàn)checkboxes、radio按鈕，和select元素在click事件。設(shè)置false時(shí)去禁止。
設(shè)置一個(gè)函數(shù)去界定何時(shí)進(jìn)行校驗(yàn)。
一個(gè)true值不是一個(gè)有效的值。
例子：禁止點(diǎn)擊校驗(yàn)checkboxes、radio按鈕和select元素。

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

元素
類型：元素

這個(gè)元素是當(dāng)前正在被驗(yàn)證的，是一個(gè)dom元素。

event
類型：時(shí)間對(duì)象

這個(gè)點(diǎn)擊的事件對(duì)象。

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

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

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

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

errorClass（默認(rèn)值為："error"）
類型：字符串
使用這個(gè)類名創(chuàng)建標(biāo)簽，查找錯(cuò)誤的標(biāo)簽并添加到錯(cuò)誤的元素。
例子：設(shè)置錯(cuò)誤的類名為"invalid"

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

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

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

errorElement（默認(rèn)值為："label"）
類型：字符串
使用這個(gè)標(biāo)簽類型去創(chuàng)建錯(cuò)誤信息提示。默認(rèn)的是label，這樣的好處是可以用for屬性創(chuàng)建一個(gè)意思明確的鏈接在錯(cuò)誤信息和字段。
例子:設(shè)置錯(cuò)誤的標(biāo)簽類型為"em"。

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

wrapper（默認(rèn)值為：window）
類型：字符串
包裹錯(cuò)誤標(biāo)簽用此屬性定義的標(biāo)簽。結(jié)合errorLabelContainer屬性創(chuàng)建一個(gè)錯(cuò)誤信息列表。
例子：包裹每個(gè)錯(cuò)誤元素使用li標(biāo)簽，創(chuàng)建一個(gè)錯(cuò)誤信息列表。

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

errorLabelContainer
類型：css選擇器
隱藏和展示驗(yàn)證時(shí)的容器
例子：所有的錯(cuò)誤的標(biāo)簽被展示在一個(gè)id為‘messageBox’無序列表,通過errorContainer選項(xiàng)傳遞的選擇器指定元素中。所有的錯(cuò)誤元素被包裹在一個(gè)li元素中，制成一個(gè)信息列表。

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

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

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

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

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

errorMap
類型：對(duì)象

鍵值對(duì)，對(duì)象的鍵是校驗(yàn)的input元素name，而值是顯示的校驗(yàn)信息。

errorList
類型：數(shù)組

一個(gè)包含當(dāng)前已經(jīng)被校驗(yàn)過的元素的數(shù)組。包含的對(duì)象有兩個(gè)屬性

- message
類型：字符串
input元素展示的驗(yàn)證信息
- element
類型：元素
此條目的dom節(jié)點(diǎn)

errorPlacement （默認(rèn)值為：放置錯(cuò)誤信息的標(biāo)簽在無效的input元素后面）
類型：函數(shù)
自定義產(chǎn)生的錯(cuò)誤驗(yàn)證標(biāo)簽的位置。第一個(gè)參數(shù)產(chǎn)生的驗(yàn)證錯(cuò)誤信息的jquery對(duì)象。第二個(gè)參數(shù)是驗(yàn)證無效的input元素的jquery對(duì)象。
例子：使用一個(gè)table來布局form表單，防止錯(cuò)誤信息在input后的td里。

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

這個(gè)回調(diào)函數(shù)有兩個(gè)參數(shù)：

error
類型：jquery對(duì)象

要插入DOM中的錯(cuò)誤標(biāo)簽。

element
類型：jquery對(duì)象

驗(yàn)證信息對(duì)應(yīng)的已經(jīng)驗(yàn)證input元素，用于error的定位。

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

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

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

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

這個(gè)回調(diào)函數(shù)傳入兩個(gè)參數(shù)：

label
類型：jquery

驗(yàn)證信息標(biāo)簽，使用它可以添加class類名和替換文本內(nèi)容。

element
類型：dom元素

當(dāng)前驗(yàn)證通過的表單元素對(duì)應(yīng)的dom元素。

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

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

例子：添加一個(gè)error class到他的驗(yàn)證無效元素和驗(yàn)證信息

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

這個(gè)回調(diào)函數(shù)傳入三個(gè)參數(shù)：

element
類型：DOM元素

當(dāng)前驗(yàn)證無效的表單元素。

errorClass
類型：字符串

option中errorClass當(dāng)前值。

validClass
類型：字符串

option中validClass當(dāng)前值。

unhighlight（默認(rèn)值：移除errorClass）
類型：函數(shù)
設(shè)置失去聚焦的回調(diào)函數(shù)，參數(shù)與highlight相同。

ignoreTitle（默認(rèn)值：false）
類型：布爾值

檢查是否符合驗(yàn)證規(guī)則，使用這個(gè)方法的之前必須對(duì)form元素執(zhí)行validate()。
例子：設(shè)置一個(gè)form表單的驗(yàn)證規(guī)則，然后檢查表單是否符合驗(yàn)證規(guī)則在點(diǎn)擊按鈕之后。

  
  

  Validate!

讀取、添加和移除一個(gè)元素的規(guī)則。

rules()
這個(gè)方法不用任何參數(shù)。讀取這個(gè)表單元素的驗(yàn)證規(guī)則。

rules("add",rules)

add
類型：字符串

rules
類型：對(duì)象

添加的驗(yàn)證規(guī)則。接受validate方法中相同格式的驗(yàn)證規(guī)則。

rules("remove",rules)

remove
類型：字符串

rules
類型：對(duì)象

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