by zhangxinxu from http://www.

本文地址：http://www./wordpress/?p=2857

一、前言

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

目前市面上有不少表單驗證插件，看似強(qiáng)大，實在糟糕！

總結(jié)下，有以下一些問題：

1. 過多干預(yù)
   
   包括：改變了表單元素UI, 為表單元素綁定過多事件等
   
   


2. 布局等限制
   
   包括：需要特定結(jié)構(gòu)的布局，需要特定的類名或者ID
   
   


3. 學(xué)習(xí)成本
   
   包括：N多元作者自定義的屬性，或者自定義的特定的數(shù)據(jù)結(jié)構(gòu)
   
   
   


4. 可用性



當(dāng)JS出現(xiàn)錯誤的時候而無法正常運(yùn)作的時候，驗證就是聾子的耳朵——擺設(shè)，即使在現(xiàn)代瀏覽器下也是如此。

面向未來的表單驗證

1. 驗證驅(qū)動
   
   驗證信息HTML驅(qū)動，例如HTML5中required, pattern, multiple等


2. 驗證形式
   
   非即時響應(yīng)，submit驗證，如Chrome瀏覽器的處理；或者弱即時響應(yīng)，如FireFox瀏覽器僅僅紅色外發(fā)光。


3. 驗證交互
   
   浮動形式，尖角指示。
   
   

換言之，所謂面向未來的表單驗證，是遵循W3C HTML5規(guī)范的表單驗證，我們可以從目前領(lǐng)先的瀏覽器中看到大致雛形。而本文所有展示的html5Validate表單驗證插件，就是基于這個未來設(shè)計的。

二、html5Validate概述

html5Validate插件的驗證機(jī)制、交互形式甚至形式與Chrome瀏覽器HTML5表單內(nèi)置驗證走的很近。在使用的時候，就是寫寫原生的HTML5表單代碼。我只想說：走陽光大道和過獨木橋的感覺是完全不一樣的。

舉個簡單例子，一個郵箱驗證，HTML5代碼表示應(yīng)該是下面這個樣子：

<input type="email" required>

好巧的是，使用html5Validate進(jìn)行表單驗證的時候，也是使用上面這段HTML代碼！

類似下面的綁定：

$("form").html5Validate();

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

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

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

type="date", type="hour", type="password"等因為不同網(wǎng)站規(guī)則不一樣，因此，沒有放在html5Validate中，不過，您可以很簡單地進(jìn)行擴(kuò)展，使您的項目支持之，這個后面會介紹（參見 part 9-4）。

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

支持自動的全角轉(zhuǎn)半角。

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

兼容性

html5Validate通過jQuery1.4+測試，支持正常IE6-IE10瀏覽器，F(xiàn)ireFox, Chrome等現(xiàn)代瀏覽器。

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

您可以狠狠地點擊這里：html5Validate表單驗證jQuery插件測試demo

//zxx: 還有一些實際應(yīng)用的例子將會在本文后半部分展示。

使用

1. 引用jQuery框架，示意：
   
   
   

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

   
   
   
   


2. 引用html5Validate插件，示意：
   
   
   

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

   
   
   
   


3. 綁定調(diào)用：
   
   
   

   $().html5Validate(callback, options);

   
   
   
   

   示意，假設(shè)測試表單id為html5Form，則有：
   

   
   

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

   
   
   
   

下載

未壓縮版JS：jquery-html5Validate.js

壓縮版JS：jquery-html5Validate-min.js

zip源文件打包下載（含測試demo）（右鍵-[目標(biāo)|源文件]另存為）：jquery-html5Validate.zip

更新時間：

2012-12-17 v1.0 beta

2012-12-20 v1.0

2012-12-21 v1.1

四、可選參數(shù)以及詳解

可選參數(shù)見下表：

1. 參數(shù)novalidate

既然html5Validate插件驗證與原生HTML5驗證公用一套HTML代碼，顯然就存在共存的問題。

如果沒有設(shè)計這個參數(shù)novalidate或者novalidate值為false, 則瀏覽器內(nèi)置表單驗證優(yōu)先，全部pass之后才輪到插件進(jìn)行驗證，也就是說，兩者是沒有沖突的。其實，原本我是不打算設(shè)計這個參數(shù)的，因為，我覺得瀏覽器內(nèi)置的驗證以及交互效果很贊的，但是，IE10的出現(xiàn)讓我速速打消了這個念頭，因為，丫丑得我根本無法直視——大紅的粗框框?。?br>

novalidate為HTML5表單內(nèi)置的屬性（W3C草案），可以讓現(xiàn)代瀏覽器（IE10+, FireFox, Chrome, Opera等）默認(rèn)不對表單做驗證（忽略required, pattern等）。html5Validate插件默認(rèn)novalidate: true也就是說，其默認(rèn)對包裝器元素添加了novalidate="novalidate"，以阻止瀏覽器的默認(rèn)驗證，下圖代碼為JS生成之后所截：

這就是為什么測試demo在FireFox等瀏覽器下不出現(xiàn)內(nèi)置提示效果的原因。

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

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

2. 參數(shù)submitEnabled

這個參數(shù)的設(shè)計是很有必要的。

很多時候，我們的表單是Ajax提交的，當(dāng)頁面加載不是很及時的時候——如表單元素呈現(xiàn)，但驗證腳本未綁定——，用戶回車一個輸入框，悲劇來了，默認(rèn)表單的submit被觸發(fā)了，而不是ajax提交……

我不清楚其他團(tuán)隊是怎么處理的，我處理這類問題是表單元素的提交按鈕默認(rèn)disabled，在表單驗證腳本綁定OK之后，去除disabled屬性，使一切正常。

submitEnabled參數(shù)的作用就是讓表單中的禁用的submit性質(zhì)的按鈕可用。

例如，測試demo中，默認(rèn)按鈕是disabled的，這樣，就算JS因網(wǎng)絡(luò)等原因被block了，用戶也無法提交表單，避免造成更加不好的體驗。

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

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

3. 參數(shù)labelDrive

顧名思意，label驅(qū)動。該參數(shù)針對錯誤提示框中的文字內(nèi)容。

這是與瀏覽器內(nèi)置提示文字不一樣的地方，優(yōu)先label標(biāo)簽文字提示。什么意思？

html5Validate插件有兩套文字提示機(jī)制。一種是label標(biāo)簽驅(qū)動，其次是內(nèi)置固定提示文字，如“請?zhí)顚懘俗侄巍薄?/p>

//zxx: 對于單復(fù)選框以及按鈕，由于點擊它們對應(yīng)label標(biāo)簽會觸發(fā)選中或者按鈕事件，因此，對于這些元素，labelDrive參數(shù)是完全的醬油 – 提示文字與label毫無關(guān)系。對于下拉框而言，其在隱藏狀態(tài)下，提示文字可以從label獲?。环请[藏狀態(tài)也是醬油。

何為label標(biāo)簽驅(qū)動？舉個例子：

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

上面HTML的提示文字就是：

如果對應(yīng)label標(biāo)簽中的文字是“郵箱/手機(jī)”，則提示文字是：

也就是說“label標(biāo)簽驅(qū)動”就是把label標(biāo)簽中的文字作為提示關(guān)鍵字，這樣子的提示更智能，同時也不會增加額外的HTML代碼。

該文字如何獲取？

①找到與表單元素id對應(yīng)的label元素(for關(guān)聯(lián))，如果沒有則應(yīng)用內(nèi)置提示文字規(guī)則；

②獲取label標(biāo)簽中的文字，過濾星號(*)，中文冒號(：)和英文冒號(:)，剩下的文字作為提示關(guān)鍵字出現(xiàn)在提示框中，如果輸入框內(nèi)容為空則提示“您尚未輸入***”；格式不準(zhǔn)確則提示“您輸入的***格式不準(zhǔn)確”。

③如果label標(biāo)簽文字與表單元素的placeholder值一樣，則此label標(biāo)簽醬油。

④如果有多個label元素，符合要求的提示文字會累加。

⑤如果最后得到的label標(biāo)簽文字為空，同樣應(yīng)用泛泛的提示文字（如“請?zhí)顚懘俗侄巍被颉皟?nèi)容格式不符合要求”）。

小技巧

你可以隱藏label標(biāo)簽（如demo中兩個拖選）；或部分隱藏，如demo中評論部分：

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

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

4. 參數(shù)validate 新增于2013-06-19

新增參數(shù)validate. 實際開發(fā)的時候，各類驗證需求層出不窮。例如，今天@jason就在評論中提到，是否可以指定多選就3項。這不屬于HTML5規(guī)范中驗證，也不是常規(guī)驗證需求，在插件中添加此方法是有違插件的設(shè)計原則的，因此，插件內(nèi)部是不會支持這類驗證的。

在我的實際項目中，MooTools版的html5Validate插件是有一個可選參數(shù)validate，參數(shù)值為函數(shù)，就是一個額外驗證的函數(shù)，專門對付一些特殊的驗證需求。今天正好也為jQuery版增加下這個參數(shù)。

插件內(nèi)部是如此運(yùn)作的，先執(zhí)行插件內(nèi)置的驗證，然后，再執(zhí)行validate這個驗證函數(shù)，如果返回值是true，則執(zhí)行我們相對表單進(jìn)行的回調(diào)操作。

言語蒼白，demo明了。您可以狠狠地點擊這里：html5Validate新增validate參數(shù)demo

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

然后，相關(guān)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驗證就會停止，效果達(dá)到。

五、四個自定義屬性

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

1. 自定義屬性”data-key”和”data-target”

這兩個參數(shù)是為模擬表單（或稱為“自定義表單”）設(shè)計的。

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

① “data-key”作用

模擬表單往往都是純鼠標(biāo)操作的，此時，類似“請?zhí)顚懘俗侄巍被蛘摺澳斎氲摹本惋@得不準(zhǔn)確，不準(zhǔn)確的關(guān)鍵就是這里的操作動詞“填寫”與“輸入”。"data-key"的值就表示這個關(guān)鍵動詞，如demo中的第二個拖選：

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

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

注意：隱藏性質(zhì)表單的"data-key"是可以缺省的，對于一般的隱藏輸入框，默認(rèn)"data-key"值為“輸入”；對于隱藏的單復(fù)選框或下拉框，默認(rèn)"data-key"值為“選擇”。

① “data-target”作用

從可用性上講，模擬表單都有一個對應(yīng)的隱藏不可見的真實表單元素，或visibility:hidden的select下拉框，或hidden類型的input框，或者display:none的radio們。

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

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

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

HTML代碼如下：

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

2. 自定義屬性”data-max”和”data-min”

這兩個自定義屬性要好理解多了，一般用在文本域上或昵稱文本框上，用做最多字符個數(shù)和最小字符個數(shù)限制。例如demo最后文本域：

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

表示，評論內(nèi)容需要5-100個字符。無論字符不足或者是超出，都會出現(xiàn)提示，其中，當(dāng)內(nèi)容超出的時候，html5Validate會自動幫你選中溢出部分的文字，例如下面截圖：

六、一些驗證類型的說明

1. type=number, 整數(shù)與小數(shù)

type=number文本框（數(shù)值文本框）的驗證相對復(fù)雜點，這里有必要說下。數(shù)值文本框有step, min, max原生屬性。min, max表示數(shù)值最小值和最大值，step缺省表示輸入值必須整數(shù)，step為0.1表示輸入值最多1位小數(shù)（.00結(jié)尾除外）。

具體驗證規(guī)則參見之前下的一步棋：HTML5 number類型文本框step屬性的驗證機(jī)制

數(shù)值文本框的UI

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

因此，實際上，不少團(tuán)隊的數(shù)值類型框還是老舊的type="text"以避免瀏覽器自帶的上下箭頭。OK，沖突來了，html5Validate需要HTML5代碼做驗證，實際實現(xiàn)不能使用HTML5的東西，怎么辦？

很簡單，在類型后面加個空格，例如，不是設(shè)置type="number"，而是設(shè)置type="number "或者type="number|". //zxx: 管道符用來支持多type公用

html5Validate會自動過濾最后的空格，因此，相關(guān)的驗證沒有任何影響。

數(shù)值文本框與multiple

數(shù)值文本框不支持multiple, 此規(guī)則與瀏覽器一致。email/tel等類型支持multiple，多個郵箱或手機(jī)號使用逗號(,)分隔。

2. 不得不提的type=range

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

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

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

3. type=radio以及 type=checkbox的驗證規(guī)則

無論是單選框還是復(fù)選框，只有是否必選的驗證(required).

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

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

七、內(nèi)置插件testRemind介紹

jquery-html5Validate.js中還內(nèi)置另外一個插件 – testRemind. 就是出現(xiàn)那個黃色提示框框的插件。

用法如下：

$().testRemind(content, options);

其中，content為提示的內(nèi)容，可以包含HTML字符串；options為可選參數(shù)。

可選參數(shù)

參見下表：

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

參數(shù)含義

① 參數(shù)size

沒什么好說的，提示框框三角的大小。

② 參數(shù)align

沒多少好說的，三角在框框的左邊、中間還是右邊。

在html5Validate中，一般的表單元素尖角都是在中間的，但是，單選框和復(fù)選框尖角實在左側(cè)，如下圖所示，這個設(shè)置目前暫不可變：

③ 參數(shù)css

該選項可以讓你修改提示框的UI。

例如，通過如下的設(shè)置，我們可以讓提示框框的效果長得跟Chrome瀏覽器近似：

$("input").testRemind("無論輸入什么，都不合格！", {
    size: 10,
    css: {
        padding: "8px 10px",
        borderColor: "#aaa",
        borderRadius: 8,
        boxShadow: "2px 2px 4px rgba(0,0,0,.2)",
        background: "#fff url(chrome-remind.png) no-repeat 10px 12px",
        backgroundColor: "#fff",
        fontSize: 16,
        textIndent: 20
    }
}).get(0).focus();

于是，有類似下面效果（截自FireFox 17）：

您可以狠狠地點擊這里：testRemind Chrome UI測試demo

幾乎醬油的可選參數(shù)

在實際使用的時候，testRemind方法的這幾個可選參數(shù)幾乎是醬油的，因為html5Validate方法并未暴露相關(guān)參數(shù)可以修改彈出框框的UI，這是我故意這樣設(shè)計的。

一來自己不希望html5Validate與testRemind方法有過多的耦合，因為這會讓我覺得復(fù)雜，而產(chǎn)生不安；其次，對于一個項目而言，提示框框效果應(yīng)該是整站統(tǒng)一，樣式設(shè)置的限制未嘗不是一件好事。

不過，此處小標(biāo)題是“幾乎醬油”，言外之意就是您還是可以通過一定的外部設(shè)置，改變提示框框的樣式的。本插件JS中暴露了一個名為$.testRemind.css的對象，您可以對其加加減減來控制提示框的UI.

舉個板栗，如下代碼：

$.testRemind.css = {
    borderColor: "#a0b3d6",
    backgroundColor: "#f0f3f9"	
};
$("#testForm").html5Validate();

則，提示框框就會變成下面這幅屌模樣：

總結(jié)為：testRemind方法的CSS有限可選參數(shù)options中的css對象，如果沒有，使用$.testRemind中的css對象。

注意：提示框出現(xiàn)后，點擊提示框以外的頁面任意位置，或在表單元素foxus狀態(tài)下觸發(fā)鍵盤，或改變?yōu)g覽器的尺寸，提示框都會因此隱藏。

$.testRemind.display

除了$.testRemind.css外，還有一個$.testRemind.display屬性，Boolean值(true/false)，用來反映當(dāng)前是否有彈框顯示。關(guān)鍵時候，這個還是很管用的。

//zxx: 下面為廣告~~注意不要勿點~~嘻嘻~~

八、高階使用

$().html5Validate()方法是針對表單元素的，已經(jīng)自動綁定了submit事件，并阻止了默認(rèn)表單提交。然而，各類交互需求千變?nèi)f化，自以為是的自動綁定可能滿足不了苛刻的丈母娘，此時我們需要另外的處理，這就是這里要說的html5Validate的高階使用。

html5Validate中有個名為$.html5Validate的對象，其中有一些方法，如驗證元素是否為空($.html5Validate.isEmpty(ele))，是否合法($.html5Validate.isRegex(ele, regex, params))等，因為我比較懶，這幾個方法不介紹。這里著重要提的是下面這個方法：

$.html5Validate.isAllpass(elements, options);

顧名思意：HTML5驗證 – 是否全部通過！

1. 參數(shù)elements

elements參數(shù)必需，可以是：form節(jié)點，或者jQuery包裝form，或者是需要驗證的元素們。代碼示意如下：

$.html5Validate.isAllpass(document.getElementsByTagName("form")[0]);
$.html5Validate.isAllpass($("form"));
$.html5Validate.isAllpass($("input, textarea, select"));

2. 可選參數(shù)options

options可選參數(shù)目前就一個，就是labelDrive，html5Validate方法中的參數(shù)labelDrive實際上是喂給$.html5Validate.isAllpass使用的。

$.html5Validate.isAllpass方法與表單沒有任何關(guān)系，因此，我們可以更加靈活地應(yīng)用在其他一些特殊場景上，舉個簡單例子，通過按鈕點擊事件驗證并觸發(fā)相關(guān)操作：

訂閱優(yōu)惠信息
<input type="email " class="email" placeholder="輸入郵箱，如a@b.com" required />
<a href="javascript:" class="button">訂閱</a>

然后，類似下面的驗證處理：

$(".button").bind("click", function() {
    var email = $(".email");
    if ($.html5Validate.isAllpass(email)) {
       // 郵箱驗證通過，該干嘛干嘛~~
    }
});

您可以狠狠地點擊這里：$.html5Validate.isAllpass簡單應(yīng)用demo

九、其他可用的全局方法、對象及擴(kuò)展

1. 全半角轉(zhuǎn)換DBC2SBC方法

方法名稱就是DBC2SBC，一個字符串參數(shù)，返回新的半角字符串，例如：

DBC2SBC("１３２０８０３３６２１"); // 結(jié)果是"13208033621"

2. 檢測元素是否可見

包裝器方法，名稱為$().isVisible(), 返回Boolean值，true/false.

這里的不可見指的是不能被focus的隱藏，包括type="hidden"隱藏域, display:none以及visibility:hidden, 屏幕外隱藏以及透明度為0等不在其中。

3. Boolean型屬性檢測

包裝器方法，名稱為$().hasProp(prop), 返回Boolean值，true/false.

所謂Boolean型屬性指的是HTML5中required, multiple, novalidate等屬性有，值缺省的屬性。具體可參見“HTML5 Boolean屬性值的JS獲取”一文。

4. 全局對象OBJREG及擴(kuò)展

此對象就是根據(jù)表單type類型進(jìn)行對應(yīng)驗證的數(shù)據(jù)源所在，我們可以在JS源代碼或者在外部對其進(jìn)行擴(kuò)展。舉個例子，假設(shè)你們站點的日期只能是xxxx-xx-xx這種形式，則，你可以增加如下正則（此正則示意，實際驗證并不完全）：

OBJREG.DATE = "^[1|2]\\d{3}\\-[0|1]?\\d\\-[0-3]?\\d$"

于是乎，當(dāng)提交表單含type="date"的輸入框的時候，如果里面的值不符合上面的OBJREG.DATE正則，就會顯示OBJREG["prompt"].date對應(yīng)的提示文字內(nèi)容。

您還可以自定義HTML5規(guī)范以外的type, 例如插件自帶的type=zipcode郵編驗證就是自定義的。

類似的，您網(wǎng)站的昵稱等也可以自定義，例如type="nickname", OBJREG對象如下擴(kuò)展即可：

昵稱
<input type="nickname" class="nickname" required data-min="6" data-max="20" /> 6-20個單詞字符
<a href="javascript:" class="button">檢測</a>

JS部分的設(shè)置：

OBJREG.NICKNAME = "^\\w+$";
OBJREG["prompt"].nickname = "只能是字母數(shù)字以及下劃線";

$(".button").bind("click", function() {
    var nickname = $(".nickname");
    if ($.html5Validate.isAllpass(nickname)) {
        alert("驗證通過！");    
    }
});

于是乎，當(dāng)含非單詞字符的時候，就會有下圖所示提示：

您可以狠狠地點擊這里：html5Validate全局對象OBJREG擴(kuò)展demo

OBJREG對象與pattern屬性之間關(guān)系

一句話，pattern權(quán)重大于OBJREG.

舉個例子，有些情況下，數(shù)值輸入框可以允許輸入中文單位，您就可以這樣處理：

<input type="number" pattern="^\d+" />

這樣子，插件會使用pattern屬性對應(yīng)的正則，而不是type對應(yīng)的正則。于是，您輸入”10人”就不會提示你“請輸入數(shù)值”。

注意：pattern屬性對應(yīng)的正則中的斜杠(\)等無需轉(zhuǎn)義，但是，如果是OBJREG對象表示，則需要轉(zhuǎn)義(\\)！

十、各類實際應(yīng)用

1. 注冊及其驗證

您可以狠狠地點擊這里：html5Validate下注冊以及驗證demo

這個demo在demo里面算是蠻仿真的，驗證碼以及驗證什么的都是有處理的。

值得說明的

① 昵稱有個模擬Ajax驗證的處理，當(dāng)輸入5個合法字符的時候，會提示“該昵稱已存在”。

其中，使用了前面提到的$.testRemind.display以及$.html5Validate.isRegex(ele).

② 確認(rèn)密碼框禁用與不禁用的控制部分有這么一行代碼：

if ($.html5Validate.isEmpty(this)) {

$.html5Validate.isEmpty前面曾一筆帶過，其用來檢測輸入框值是否為空，非password類型輸入框會過濾前后空格。

③ html5Validate插件并沒有密碼或手機(jī)號碼前后一致驗證的方法，如果在實際使用中遇到這類需求，您可以在html5Validate驗證回調(diào)中進(jìn)行額外驗證。

2. 發(fā)表點評及驗證

您可以狠狠地點擊這里：html5Validate發(fā)表點評及驗證demo

這個demo的重點就在星星的處理上。

星星的本質(zhì)是單選框組，從差到好共5個單選，默認(rèn)是顯示的，當(dāng)JS執(zhí)行到此的時候，單選框組隱藏，默認(rèn)隱藏的星星們顯示；這個交互就是我上面提到的模擬表單！

單選框組的驗證只有”是否必選”這1條，如果必選，則僅僅1個單選required即可，理論上是無論哪個都行。規(guī)范與統(tǒng)一期間，我們可以約定同組第一個radio設(shè)置required. 再由于這里的radio被模擬，因此，這個有required屬性的單選框必須隱藏(display:none或visibility:hidden)，否則，提示文字的位置為指向這個看不見的單選框。

該單選框HTML代碼如下：

<input type="radio" id="radioImp1" name="impress" value="1" required data-target="starScore"><label for="radioImp1">差</label>

然后通過：

$().css("visibility", "hidden");

將其隱藏不可見，打通任督二脈，以便data-target的乾坤大挪移招數(shù)可以發(fā)起來！于是，我們就看到了上圖中“提示框指向星星”的畫面。

點擊星星的操作實際是讓對應(yīng)單選框選中，從這點來看，我們還可以把星星使用label標(biāo)簽表示， 這樣，連選中的JS代碼都可以省了。呵呵~~

其他都是些常規(guī)驗證，沒有什么好說的。

十一、結(jié)語以及其他雜碎

IE10向下兼容模式的IE6-IE9, 其HTML5表單屬性又有嚴(yán)重的沖突bug（外表看不出來）. 因此，本插件在這些瀏覽器下有部分的不支持，主要是IE10支持的HTML5 type類型，具體可參見前面一篇文章：“IE10↘IE7-IE9 type=email的完全拋棄”。

我個人的建議是忽略之，理由略……如果您實在想支持，email/tel/url/number這幾種type后面加一個空格即可！在參數(shù)novalidate為false的時候，本插件會自動把后面的空格給remove掉的，并不影響正常的HTML5表單功能。

本插件驗證機(jī)制多遵循Chrome瀏覽器，因此，其表單驗證都是一個一個提示的，大范圍標(biāo)紅這種需求本插件滿足不了。

補(bǔ)充：關(guān)于即時驗證

我去年這個時候?qū)懥似懻揓S前端驗證的文章“JS前端驗證與用戶自由思想”。我不喜歡跟風(fēng)，我對即時響應(yīng)驗證是相當(dāng)不感冒的，推崇結(jié)果為導(dǎo)向的驗證。這些想法不是憑空YY出來的，而是借鑒與參考了Google以及Chrome瀏覽器。因此，像這種可以很好推廣自己想法的機(jī)會，自己是不會讓插件支持即時響應(yīng)驗證的。同時即時驗證意味著要對各個表單元素綁定事情，這樣，豈不反而陷入了“過多干預(yù)”這個缺點，限制了用戶的自由?！坝脩糇杂伞笔俏磥淼内厔?，this plugin designs for future!

雖然插件支持即時驗證無望，但是，插件之外是可以簡單幾行代碼支持的，如下：

$.fn.immediValidate = function(passCallback) {
    return $(this).find(":input").each(function() {
        if (/^submit|image|reset|file|radio|checkbox|button$/.test(this.type)) return;
        var self = this;
        $(this).bind("blur", function() {
            setTimeout(function() {
                if ($.testRemind.display == false && $.html5Validate.isAllpass($(self))   ) {
                     $.isFunction(passCallback) && passCallback.call(self);
                }
            }, 100);    
        });
    });
};

于是，我們只要這樣綁定JS就可以了：

$("form").html5Validate().immediValidate();

本地已驗證。

雖然html5Validate插件的完成細(xì)嚼慢咽，多番積累，但是，不可能面面俱到，因此，如果承蒙您使用了，并且發(fā)現(xiàn)了相關(guān)問題，歡迎提出來。我會盡快修改并發(fā)布的。因為github自己還玩得不熟，版本啊更新什么的都是比較傳統(tǒng)的手動方式，所以可能會有JS是最新的，但是文中的更新日期還是落后的情況，希望見諒。

也歡迎提出其他寶貴意見，不甚感謝！

原創(chuàng)文章，轉(zhuǎn)載請注明來自張鑫旭-鑫空間-鑫生活[http://www.]

本文地址：http://www./wordpress/?p=2857

（本篇完）

如果您覺得本文的內(nèi)容對您的學(xué)習(xí)有所幫助：

標(biāo)簽： HTML5, html5Validate, jQuery, 插件, 表單, 驗證

這篇文章發(fā)布于 2012年12月20日，星期四，13:43，歸類于 jquery相關(guān)。                        閱讀 21063 次, 今日 40 次