解決了之前元件如下不足：
1. 自定義驗證順序有問題；
2. 即時驗證支援沒內建；
3. 不能隨意定製驗證規則；

等等。

今年會開源，大家稍安~

更新於2016-07-08
又有不少人問了，開源還需要時日。不過大家現在是可以使用的，下面是最簡單使用，需要seajs:

<script src="http://qidian.gtimg.com/lulu/theme/modern/js/plugin/sea.js"></script>
<script>
seajs.config({
    'base': 'http://qidian.gtimg.com/lulu/theme/modern/js'
}).use(['common/ui/Validate'], function(Validate) {
    new Validate($('#form'), callback, options);
});

別看寫得很多，其實基本使用很簡單的。後面的文件只要是面向複雜定製的。

如果上面的使用還是覺得不夠簡單，可以試試直接使用下面的JS地址：

<script src="http://qidian.gtimg.com/c/=/lulu/theme/modern/js/common/ui/Validate.js,/lulu/theme/modern/js/common/ui/ErrorTip.js,/lulu/theme/modern/js/common/ui/Follow.js"></script>

可以直接使用包裝器方法，例如：

$(form).validate(callback, options);

一、前言

前3篇文章實際都是為本文做鋪墊的，如果以下棋表示，前三篇是普通走棋，本篇是將軍！

目前市面上有不少表單驗證外掛，看似強大，實在糟糕！

總結下，有以下一些問題：

1. 過多幹預
   包括：改變了表單元素UI, 為表單元素繫結過多事件等
   
2. 佈局等限制
   包括：需要特定結構的佈局，需要特定的類名或者ID
   
3. 學習成本
   包括：N多元作者自定義的屬性，或者自定義的特定的資料結構
   
4. 可用性

   當JS出現錯誤的時候而無法正常運作的時候，驗證就是聾子的耳朵——擺設，即使在現代瀏覽器下也是如此。

面向未來的表單驗證

1. 驗證驅動
   驗證資訊HTML驅動，例如HTML5中required
   , pattern, multiple等
2. 驗證形式
   非即時響應，submit驗證，如Chrome瀏覽器的處理；或者弱即時響應，如FireFox瀏覽器僅僅紅色外發光。
3. 驗證互動
   浮動形式，尖角指示。
   

換言之，所謂面向未來的表單驗證，是遵循W3C HTML5規範的表單驗證，我們可以從目前領先的瀏覽器中看到大致雛形。而本文所有展示的html5Validate表單驗證外掛，就是基於這個未來設計的。

二、html5Validate概述

html5Validate外掛的驗證機制、互動形式甚至形式與Chrome瀏覽器HTML5表單內建驗證走的很近。在使用的時候，就是寫寫原生的HTML5表單程式碼。我只想說：走陽光大道和過獨木橋的感覺是完全不一樣的。

舉個簡單例子，一個郵箱驗證，HTML5程式碼表示應該是下面這個樣子：

<input type="email" required>

好巧的是，使用html5Validate進行表單驗證的時候，也是使用上面這段HTML程式碼！

類似下面的繫結：

$("form").html5Validate();

於是，您在提交表單的時候會（在各個瀏覽器下）看到這樣子的提示：
 

跟Chrome瀏覽器下的提示文字近似：
 

html5Validate支援我所知的HTML5驗證相關的東西，如type="email", type="number", type="tel", type="url", step, min,max, required, pattern, multiple等，並有一些本地化擴充套件，如增加了type="zipcode"郵編等，支援type="hidden"的完整驗證（HTML5中是忽略的），支援多type共存，例如type="email|tel", 可以讓文字框輸入郵箱或者手機號碼。

type="date", type="hour", type="password"等因為不同網站規則不一樣，因此，沒有放在html5Validate中，不過，您可以很簡單地進行擴充套件，使您的專案支援之，這個後面會介紹（參見 part 9-4）。

為了滿足實際開發需求，額外增加了四個自定義屬性值：data-key, data-target, data-min, data-max. 具體何用，下面會詳細講解。

支援自動的全形轉半形。

注意：type="submit", type="reset", type="file", type="image"以及disabled的表單元素沒有驗證性可言，因此，下面所說的表單元素，並不包括他們。

相容性
html5Validate通過jQuery1.4+測試，支援正常IE6-IE10瀏覽器，FireFox, Chrome等現代瀏覽器。

三、demo、使用以及資源下載

資源下載、或者使用遇到什麼問題，可以去Github上提問，我會及時更新與建設，也歡迎大家一起參與。

使用

1. 引用jQuery框架，示意：

   <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

2. 引用html5Validate外掛，示意：

   <script src="http://www.zhangxinxu.com/study/js/mini/jquery-html5Validate-min.js"></script>

3. 繫結呼叫：

   $().html5Validate(callback, options);

   示意，假設測試表單id為html5Form，則有：

   $("#html5Form").html5Validate(function() {
       // 全部驗證通過，該幹嘛幹嘛~~
   });

//zxx: 還有一些實際應用的例子將會在本文後半部分展示。

四、可選引數以及詳解

可選引數見下表：

1. 引數novalidate
既然html5Validate外掛驗證與原生HTML5驗證公用一套HTML程式碼，顯然就存在共存的問題。

如果沒有設計這個引數novalidate或者novalidate值為false, 則瀏覽器內建表單驗證優先，全部pass之後才輪到外掛進行驗證，也就是說，兩者是沒有衝突的。其實，原本我是不打算設計這個引數的，因為，我覺得瀏覽器內建的驗證以及互動效果很讚的，但是，IE10的出現讓我速速打消了這個念頭，因為，丫醜得我根本無法直視——大紅的粗框框！！

novalidate為HTML5表單內建的屬性（W3C草案），可以讓現代瀏覽器（IE10+, FireFox, Chrome, Opera等）預設不對錶單做驗證（忽略required, pattern等）。html5Validate外掛預設novalidate: true也就是說，其預設對包裝器元素添加了novalidate="novalidate"，以阻止瀏覽器的預設驗證，下圖程式碼為JS生成之後所截：

這就是為什麼測試demo在FireFox等瀏覽器下不出現內建提示效果的原因。

可能您有這樣的需求，您希望除了IE10以外的現代瀏覽器都使用瀏覽器自帶的驗證規則以及提示效果，怎麼辦，可以像下面這樣？

var isIe10 = typeof document.msHidden !== "undefiend";
$("form").html5Validate($.noop, {
    novalidate: isIe10? false: true
});

2. 引數submitEnabled
這個引數的設計是很有必要的。

很多時候，我們的表單是Ajax提交的，當頁面載入不是很及時的時候——如表單元素呈現，但驗證指令碼未繫結——，使用者回車一個輸入框，悲劇來了，預設表單的submit被觸發了，而不是ajax提交……

我不清楚其他團隊是怎麼處理的，我處理這類問題是表單元素的提交按鈕預設disabled，在表單驗證指令碼繫結OK之後，去除disabled屬性，使一切正常。

submitEnabled引數的作用就是讓表單中的禁用的submit性質的按鈕可用。

例如，測試demo中，預設按鈕是disabled的，這樣，就算JS因網路等原因被block了，使用者也無法提交表單，避免造成更加不好的體驗。

等驗證事件初始化完畢，自然，disabled的按鈕被enabled了。

對於原生submit()的表單或者可以submit()的表單，此引數醬油，您可以無需disabled提交按鈕。

3. 引數labelDrive
顧名思意，label驅動。該引數針對錯誤提示框中的文字內容。

這是與瀏覽器內建提示文字不一樣的地方，優先label標籤文字提示。什麼意思？

html5Validate外掛有兩套文字提示機制。一種是label標籤驅動，其次是內建固定提示文字，如“請填寫此欄位”。

//zxx: 對於單複選框以及按鈕，由於點選它們對應label標籤會觸發選中或者按鈕事件，因此，對於這些元素，labelDrive引數是完全的醬油 – 提示文字與label毫無關係。對於下拉框而言，其在隱藏狀態下，提示文字可以從label獲取；非隱藏狀態也是醬油。

何為label標籤驅動？舉個例子：

<label for="email">郵箱：</label><input type="email" id="email" required>

上面HTML的提示文字就是：

如果對應label標籤中的文字是“郵箱/手機”，則提示文字是：

也就是說“label標籤驅動”就是把label標籤中的文字作為提示關鍵字，這樣子的提示更智慧，同時也不會增加額外的HTML程式碼。

該文字如何獲取？
①找到與表單元素id對應的label元素(for關聯)，如果沒有則應用內建提示文字規則；
②獲取label標籤中的文字，過濾星號(*)，中文冒號(：)和英文冒號(:)，剩下的文字作為提示關鍵字出現在提示框中，如果輸入框內容為空則提示“您尚未輸入***”；格式不準確則提示“您輸入的***格式不準確”。
③如果label標籤文字與表單元素的placeholder值一樣，則此label標籤醬油。
④如果有多個label元素，符合要求的提示文字會累加。
⑤如果最後得到的label標籤文字為空，同樣應用泛泛的提示文字（如“請填寫此欄位”或“內容格式不符合要求”）。

小技巧
你可以隱藏label標籤（如demo中兩個拖選）；或部分隱藏，如demo中評論部分：

<label for="comment">內容：</label><textarea id="comment" rows="5" required data-min="5" data-max="100">

提示文字為“您尚未輸入評論內容”，而不是“您尚未輸入評論”。

4. 引數validate 新增於2013-06-19
新增引數validate. 實際開發的時候，各類驗證需求層出不窮。例如，今天@jason就在評論中提到，是否可以指定多選就3項。這不屬於HTML5規範中驗證，也不是常規驗證需求，在外掛中新增此方法是有違外掛的設計原則的，因此，外掛內部是不會支援這類驗證的。

在我的實際專案中，MooTools版的html5Validate外掛是有一個可選引數validate，引數值為函式，就是一個額外驗證的函式，專門對付一些特殊的驗證需求。今天正好也為jQuery版增加下這個引數。

外掛內部是如此運作的，先執行外掛內建的驗證，然後，再執行validate這個驗證函式，如果返回值是true，則執行我們相對錶單進行的回撥操作。

demo中有兩個額外的驗證：一是前後密碼需要一致；二是多選項至少選擇3個。大致截圖如下：

然後，相關JS如下：

$("form").html5Validate(function() {
        alert("驗證全部通過！");
        this.submit();
    }, {
    validate: function() {
        // 下面這些就是額外的一些特殊驗證
        if ($("#pwdCheck").val() !== $("#pwd").val()) {
            $("#pwdCheck").testRemind("前後密碼不一致");
            return false;  
        } else if ($("input[type='checkbox']:checked").length < 3) {
            $("#checkBox").testRemind("至少選擇3項");
            return false;  
        }
       return true;  
    }
});

注意需要有Boolean型別返回值，驗證出錯返回false驗證就會停止，效果達到。

五、四個自定義屬性

HTML5的表單驗證html5Validate自然支援，但是，僅僅HTML5的東西貌似不能完全支援實際的各類需求，因此，html5Validate中還有4個自定義屬性(就是前面提到的data-key, data-target, data-min和data-max)，幫助覆蓋95%+的驗證需求。

1. 自定義屬性”data-key”和”data-target”
這兩個引數是為模擬表單（或稱為“自定義表單”）設計的。

何為模擬表單？如自定義的下拉框，或者星星評分選擇等……

① “data-key”作用
模擬表單往往都是純滑鼠操作的，此時，類似“請填寫此欄位”或者“您輸入的……”就顯得不準確，不準確的關鍵就是這裡的操作動詞“填寫”與“輸入”。"data-key"的值就表示這個關鍵動詞，如demo中的第二個拖選：

<label for="serverScore" class="dn">服務評分</label>
<input type="hidden" id="serverScore" required data-key="拖選" />

於是，提示的時候，就是：

注意：隱藏性質表單的"data-key"是可以預設的，對於一般的隱藏輸入框，預設"data-key"值為“輸入”；對於隱藏的單複選框或下拉框，預設"data-key"值為“選擇”。

① “data-target”作用
從可用性上講，模擬表單都有一個對應的隱藏不可見的真實表單元素，或visibility:hidden的select下拉框，或hidden型別的input框，或者display:none的radio們。

要知道，這些隱藏表單的位置是捕獲不到(display:none;)或者位置不準確的。因此，浮動提示框的位置無法確定；就算浮動框位置確定了，指向了一個看不見的東西，使用者也會很奇怪的。面對這種情況，"data-target"應運而生。

"data-target"可將黃色提示框的目標元素從真實表單元素轉移到模擬表單元素（其值正是模擬表單元素的id(或className)）。如果"data-target"不存在，或其值對應不到元素，則alert彈出提示，如上面這個截圖。

如果"data-target"對應元素存在，則就會像下面這樣提示（demo中第一個拖選）- 乾坤大挪移：

HTML程式碼如下：

<span id="hiddenRemind" class="bar_bg"><i class="bar_btn" data-rel="envirScore"></i></span>
<label for="envirScore" class="dn">環境評分</label>
<input type="range" id="envirScore" class="dn" required data-key="拖選" data-target="hiddenRemind" />

2. 自定義屬性”data-max”和”data-min”
這兩個自定義屬性要好理解多了，一般用在文字域上或暱稱文字框上，用做最多字元個數和最小字元個數限制。例如demo最後文字域：

<textarea id="comment" rows="5" data-max="100" data-min="5" required></textarea>

表示，評論內容需要5-100個字元。無論字元不足或者是超出，都會出現提示，其中，當內容超出的時候，html5Validate會自動幫你選中溢位部分的文字，例如下面截圖：

六、一些驗證型別的說明

1. type=number, 整數與小數
type=number文字框（數值文字框）的驗證相對複雜點，這裡有必要說下。數值文字框有step, min, max原生屬性。min, max表示數值最小值和最大值，step預設表示輸入值必須整數，step為0.1表示輸入值最多1位小數（.00結尾除外）。

數值文字框的UI
Chrome, Opera等瀏覽器下，數值文字框會有上下數值增減箭頭；很多固執的設計師是無法容忍這個的: “the ui is so terrible!”

因此，實際上，不少團隊的數值型別框還是老舊的type="text"以避免瀏覽器自帶的上下箭頭。OK，衝突來了，html5Validate需要HTML5程式碼做驗證，實際實現不能使用HTML5的東西，怎麼辦？

很簡單，在型別後面加個空格，例如，不是設定type="number"，而是設定type="number "或者type="number|". //zxx: 管道符用來支援多type公用

html5Validate會自動過濾最後的空格，因此，相關的驗證沒有任何影響。

數值文字框與multiple
數值文字框不支援multiple, 此規則與瀏覽器一致。email/tel等型別支援multiple，多個郵箱或手機號使用逗號(,)分隔。

2. 不得不提的type=range
type=range與type=number是近親，均有step, min, max原生屬性。然而，目前以及今後很長的一段時間，在web專案上，就驗證而言type=range幾乎沒有用武之地，原因是UI限制。何解？

如果瀏覽器支援type=range，則使用者完全是拖選操作（不能輸入），幾乎不存在範圍溢位的情況，驗證也幾乎就是擺設；如果瀏覽器不支援type=range，其UI就是個普通輸入框，其內部驗證機制與type=number無異，如果撇開語義化以及可訪問性不談，是不是可以直接使用type=number？

因此，個人看來，type=range只能作為隱藏的表單元素——為自定義表單元素服務，如demo中第一個拖選。也正因為這個原因，html5Validate並未重視type=range.

3. type=radio以及 type=checkbox的驗證規則
無論是單選框還是複選框，只有是否必選的驗證(required).

對於同一組單選框（name值一致），只要有一個單選框設定required就可以了（為了效能，也建議這麼做）。單選框的提示文字固定，取自Chrome瀏覽器，為“請選擇一個選項”。

對於複選框，哪個必選，就哪個需要設定required。其提示文字也是固定的，也是參考的Chrome瀏覽器，為“如果要繼續，請選中此框”。不過，個人舉得，複選框必選設定使非常讓人蛋疼菊緊的。

七、內建外掛testRemind介紹

jquery-html5Validate.js中還內建另外一個外掛 – testRemind. 就是出現那個黃色提示框框的外掛。

用法如下：

$().testRemind(content, options);

其中，content為提示的內容，可以包含HTML字串；options為可選引數。

可選引數
參見下表：

{
    maxWidth: 280,
    backgroundColor: "#FFFFE0",
    borderColor: "#F7CE39",
    color: "#333",
    fontSize: "12px",
    padding: "5px 10px",
    zIndex: 202
}