本文由【咚門】翻譯，未經(jīng)允許匾寝，請勿轉(zhuǎn)載
jQuery Validation Plugin是非常受歡迎的一個前端表單驗(yàn)證插件，本文是對其參考文檔的翻譯荷腊。
有一些單詞旗吁、詞組對這個插件本身來說相當(dāng)于專用名詞，如果翻譯為中文停局，反而會適得其反，有礙于閱讀者對插件用法的理解香府，所以對這些單詞董栽、詞組，我盡量保持不翻譯的原則企孩。
General Guidelines
本章節(jié)提供了對這個插件背后的設(shè)計(jì)和思考的詳細(xì)討論锭碳，這些討論可以幫助你“知其所以然”。API 文檔只是簡單地解釋各種可用的方法（methods）和配置選項(xiàng)（options）勿璃，而本節(jié)內(nèi)容涵蓋了各功能點(diǎn)更多的細(xì)節(jié)擒抛。
如果你已經(jīng)決定在你的應(yīng)用中使用這個插件 并且 想要更好地了解它，那么我們建議你閱讀這些指南补疑。
1. Goals 目的
這個插件的首要目的就是讓 人們使用表單 變得更加有趣歧沪。通過改善交互，它讓 填寫和提交表單 對用戶來說變得更加容易和沒那么惱人莲组。
為了達(dá)到這個目的诊胞，插件部署到世界各地的網(wǎng)站是很重要的，因此我們花了大量精力讓這個插件對開發(fā)者易于使用锹杈。
這個插件從來都不能取代服務(wù)器端的驗(yàn)證（serverside validation）并且也不打算這樣做撵孤。兩種驗(yàn)證都做（即瀏覽器端和服務(wù)器端都對數(shù)據(jù)進(jìn)行驗(yàn)證） 可以為你的應(yīng)用提供必要的安全性，以及提升易用性竭望。
2. Markup recommendations 建議
input 元素必須要有name屬性邪码，因?yàn)槿绻麤]有這個屬性，這個插件將不會起作用（work）咬清。
3. Methods 方法
validation method 用于實(shí)現(xiàn)驗(yàn)證邏輯闭专。提供的是一系列默認(rèn)的 validation method奴潘，例如 required。當(dāng)一個元素沒有值的時候喻圃，除了required本身和equalTo萤彩，所有的 validation method 都認(rèn)為它是有效的。這樣的話斧拍，除非指定了required雀扶，否則一個 email 輸入框一般是選填的。你可以指定一個元素輸入框包含一個有效的 email 地址肆汹，或者什么也不指定愚墓。使用 jQuery.validator.addMethod 來實(shí)現(xiàn)常用的 method。
4. Rules 規(guī)則
validation rule 把一個或多個 validation method 應(yīng)用到一個 input 元素上昂勉。你可以通過 metadata（元數(shù)據(jù)浪册？） 或 插件設(shè)置（rules 選項(xiàng)）來指定 validation rules。The decision is often influenced by serverside infrastructure. If a web framework is used, it is often easier to use metadata, which is also good for fast prototyping. Plugin settings produce cleaner markup, though valid markup results from both.
5. Fields with complex names (brackets, dots) 帶有復(fù)雜name（括弧岗照、圓點(diǎn)）的輸入框
如果你的表單由 使用不合法的 JavaScript 標(biāo)識符的name的輸入框 組成村象，那么當(dāng)使用rules選項(xiàng)的時候，你必須用引號把這些name包起來攒至。
$("#myform").validate({
rules: {
// no quoting necessary
name: "required",
// quoting necessary!
"user[email]": "email",
// dots need quoting, too!
"user.address.street": "required"
}
});
6. Refactoring rules 重構(gòu)規(guī)則
只要（whenever）你有幾個帶有相同 rules 和 messages 的輸入框厚者，重構(gòu)這些 rules 和 messages 可以減少許多重復(fù)代碼（duplication，重復(fù)迫吐、成本）库菲。要實(shí)現(xiàn)這個，使用 addMethod 和 addClassRules 是最有效率的志膀。
讓我們看一個例子（Let's consider an example）熙宇，你有十個客戶輸入框（customer fields，這里的 customer 不太好理解）溉浙，每一個要遵守兩個 rule：必填的并且最小長度為 2烫止。你需要為這兩個 rule 定制不同的 message。為了避免一次又一次地指定那些 rules 和 messages戳稽，我們可以化名為 帶有不同 messages 的 已存在的 method 并且把它們分組到一個單獨(dú)的類（即下面代碼中的 customer 類）（we can alias existing methods with different messages and group them into a single class）：
// 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
$.validator.format("Customer name must have at least {0} characters"));
// combine them both, including the parameter for minlength
$.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });
這樣做好之后烈拒，我們可以把 customer 類添加到所有的客戶輸入框，將像下面這樣（With that in place, we can add a class customer to all customer fields and be done with it）:
<inputname="customer1" class="customer">
<input name="customer2" class="customer">
<input name="customer3" class="customer">
你也可以復(fù)用（reuse）在其他 custom method 內(nèi)的 已存在的 method 广鳍，以復(fù)用某些實(shí)現(xiàn)（implementation）荆几。例如，如果你正在寫一個用于驗(yàn)證一個單獨(dú)的輸入框內(nèi)的 email 地址的 custom method赊时。你可以調(diào)用（call）適用于所有 email 的 已存在的 email method：
jQuery.validator.methods.email.call(this, email, element)
7. Error messages 錯誤信息
error message 為用戶顯示 關(guān)于無效元素和錯誤 的提示信息吨铸。有四種方式可以提供 error message。通過 input 元素的title屬性來驗(yàn)證功能祖秒，通過data屬性诞吱，通過 error 標(biāo)簽舟奠，和通過插件設(shè)置（messages選項(xiàng)）。
這里的所有 validation rules 都提供一個默認(rèn)的 error message房维，它可以用于 prototype （原型機(jī)制造）沼瘫，因?yàn)楫?dāng)沒有指定的 message 的時候才會用到它。
優(yōu)先順序是這樣子的（are as follows）：定制的 message （由插件選項(xiàng)傳遞）咙俩，元素的 title耿戚，默認(rèn)的 message。
當(dāng)使用data 屬性的時候阿趁，你可以為所有 rules 設(shè)置一個通用的（generic膜蛔，一般的，類的脖阵，屬性的）message良漱，或者每個 rule 分別指定 message：
<input required data-msg="Please fill this field">
<input data-rule-minlength="2" data-rule-maxlength="4" data-msg-minlength="At least two chars" data-msg-maxlength="At most fours chars">
8. Error message display
error message 是通過一個帶有額外的類（errorClass選項(xiàng)）<label>元素來處理的丙唧。message 和 無效元素 之間的聯(lián)系是通過<label>標(biāo)簽的for屬性提供的坑傅。當(dāng)在標(biāo)記（markup）中提供 error message 時战得，它們會相應(yīng)地被顯示和隱藏，否則按需創(chuàng)建（created on demand）悍募。默認(rèn)地卵史，<label>是被創(chuàng)建在無效元素后面的，這也是可以定制的（errorPlacement選項(xiàng)）搜立。也可以把這些 error message 放到一個 error container 錯誤容器中（errorLabelContainer選項(xiàng)）。如果要使用一個不同的元素而不是<label>槐秧，請指定選項(xiàng)errorElement啄踊。
9. General messages
除了輸入框指定的 message 之外，你可以在頁面中任何地方的一個 container（容器）里顯示一條通用的信息：“your form is invalid, please fix the highlighted fields!”刁标，例如在表單的正上方（選項(xiàng)errorContainer）颠通。當(dāng) error 出現(xiàn)或被修復(fù)時，這個 container（容器）也相應(yīng)地被顯示和被隱藏膀懈。error 標(biāo)簽的 container（容器）也可以被嵌入到 error container 里顿锰。（有點(diǎn)亂。启搂。硼控。）
10. Focusing of invalid elements
默認(rèn)地，提交表單之后胳赌，如果表單中含有無效的元素牢撼，那么表單中第一個無效元素會被聚焦。為了避免與用戶沖突疑苫，這個插件會記住表單被提交時正在被聚焦的那個元素熏版，并重新聚焦到那個元素上纷责。這樣的話，用戶就可以嘗試填寫表單末尾的元素撼短，而不是被迫一次又一次地重新聚焦（到想要填寫的元素上）再膳。這個設(shè)置是可以被禁止的（focusInvalid選項(xiàng)）。
11. Form submit 表單提交
默認(rèn)地曲横，當(dāng)表單是無效的時候喂柒，表單提交時被阻止的，并且當(dāng)它是有效的時候胜榔，正常提交胳喷。你也可以手動地處理提交（submitHandler選項(xiàng)）。
12. Skipping validation on submit
當(dāng)使用type="submit"的按鈕的時候夭织，為了跳過驗(yàn)證吭露，請?zhí)砑?code>formnovalidate屬性到那個表單上：
<input type="submit" name="go" value="Submit">
<input type="submit" formnovalidate name="cancel" value="Cancel">
這曾經(jīng)通過添加class="cancel"來實(shí)現(xiàn)，但現(xiàn)在不贊成這樣子做尊惰。（This used to work by adding class="cancel" to the input, this is now deprecated.）
13. Validation event “驗(yàn)證”事件
默認(rèn)地讲竿，forms are validated on submit，可以由兩種操作出發(fā)：用戶點(diǎn)擊提交按鈕弄屡，或當(dāng)表單輸入框被聚焦的時候 用戶按下 Enter 鍵（onsubmit選項(xiàng)）题禀。另外，一旦一個輸入框被強(qiáng)調(diào)為（was highlighted as）無效的膀捷，接下來迈嘹，只要（whenever）用戶在輸入框輸入任何字符，這個輸入框都會被驗(yàn)證一遍全庸。當(dāng)用戶輸入了一些無效的內(nèi)容到一個有效的輸入框內(nèi)秀仲，當(dāng)輸入框失去焦點(diǎn)的時候（onblur選項(xiàng)），這個輸入框同樣也會被驗(yàn)證一遍壶笼。
這些交互的目的是為了盡可能早地提供反饋神僵，同時避免用戶苦惱。在用戶還有機(jī)會輸入一些內(nèi)容之前 就展示 error message 是不好的覆劈。
14. Developing and debugging a form
在開發(fā)和 debug 表單的同時保礼，你應(yīng)該把debug選項(xiàng)設(shè)置為 true。這可以防止提交兩個有效的和無效的表單（prevents form submission on both valid and invalid forms）责语，并且 輸出一些有幫助的信息到window.console（通過 Firebug 或 Firebug Lite 可以獲扰谡稀），這有助于 debug坤候。當(dāng)你把一切都設(shè)置好了以后铝阐，卻沒有顯示任何 error message，請檢查你的 rule 是否都接受空的元素位（empty elements）有效的（像 email method 和 url method 一樣）铐拐。
有一些問題是由某些表單元素的name導(dǎo)致的徘键。你應(yīng)該避免把（提交按鈕或其他任何元素的）name設(shè)為“submit”练对。Browsers expose form elements as properties of the form element, by their name, in this case hiding native methods like submit(). 只要記住不要使用name="submit",你的人生就會很美好~~~
15. Validating multiple forms on one page 驗(yàn)證一個頁面內(nèi)的多個表單
這個插件每次調(diào)用只能處理一個表單。在一個頁面內(nèi)有多個表單的情形下吹害，你不得不一個一個地初始化這些表單（initialise them all individually）：
$( "form" ).each( function() {
$( this ).validate( options );
});
通過修改默認(rèn)設(shè)置螟凭，用 jQuery.validator.setDefaults 來一次性覆蓋多個設(shè)置，你可以免于重復(fù)插件設(shè)置它呀。
其它
太多的遞歸：
另一個常見的問題常常出現(xiàn)在下面這種代碼中：
$("#myform").validate({
submitHandler: function(form) {
// some other code
// maybe disabling submit button
// then:
$(form).submit();
}
});
這會導(dǎo)致 too-much-recursion 錯誤：$(form).submit()會觸發(fā)下一輪驗(yàn)證螺男，導(dǎo)致對submitHandler的另一次調(diào)用，也就是遞歸纵穿。
正確的做法是：用form.submit()替上面代碼中的$(form).submit()下隧，因?yàn)?code>form.submit()會觸發(fā)本地（應(yīng)該是指插件本身）的提交事件，而不是驗(yàn)證谓媒。正確的代碼如下：
$("#myform").validate({
submitHandler: function(form) {
form.submit();
}
});
