資源描述：
《jquery html5validate基于html5表單驗(yàn)證插件》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。
1、jQueryhtml5Validate基于HTML5表單驗(yàn)證插件by?zhangxinxu?from?http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=2857一、前言前3篇文章實(shí)際都是為本文做鋪墊的，如果以下棋表示，前三篇是普通走棋，本篇是將軍！目前市面上有不少表單驗(yàn)證插件，看似強(qiáng)大，實(shí)在糟糕！總結(jié)下，有以下一些問題：1.過多干預(yù)包括：改變了表單元素UI,為表單元素綁定過多事件等2.布局等限制包括：需要特定結(jié)構(gòu)的布局，需要特定的類名或者ID3.學(xué)習(xí)成本
2、包括：N多元作者自定義的屬性，或者自定義的特定的數(shù)據(jù)結(jié)構(gòu)4.可用性當(dāng)JS出現(xiàn)錯(cuò)誤的時(shí)候而無法正常運(yùn)作的時(shí)候，驗(yàn)證就是聾子的耳朵——擺設(shè)，即使在現(xiàn)代瀏覽器下也是如此。面向未來的表單驗(yàn)證1.驗(yàn)證驅(qū)動(dòng)驗(yàn)證信息HTML驅(qū)動(dòng)，例如HTML5中required,?pattern,?multiple等2.驗(yàn)證形式非即時(shí)響應(yīng)，submit驗(yàn)證，如Chrome瀏覽器的處理；或者弱即時(shí)響應(yīng)，如FireFox瀏覽器僅僅紅色外發(fā)光。3.驗(yàn)證交互浮動(dòng)形式，尖角指示。換言之，所謂面向未來的表單驗(yàn)證，是遵循W3CHTML5規(guī)范的表單驗(yàn)證，我們可以從目前領(lǐng)先的瀏覽器中看到
3、大致雛形。而本文所有展示的html5Validate表單驗(yàn)證插件，就是基于這個(gè)未來設(shè)計(jì)的。二、html5Validate概述html5Validate插件的驗(yàn)證機(jī)制、交互形式甚至形式與Chrome瀏覽器HTML5表單內(nèi)置驗(yàn)證走的很近。在使用的時(shí)候，就是寫寫原生的HTML5表單代碼。我只想說：走陽光大道和過獨(dú)木橋的感覺是完全不一樣的。舉個(gè)簡(jiǎn)單例子，一個(gè)郵箱驗(yàn)證，HTML5代碼表示應(yīng)該是下面這個(gè)樣子：好巧的是，使用html5Validate進(jìn)行表單驗(yàn)證的時(shí)候，也是使用上面這段HTML代碼！類
4、似下面的綁定：$("form").html5Validate();于是，您在提交表單的時(shí)候會(huì)（在各個(gè)瀏覽器下）看到這樣子的提示：?跟Chrome瀏覽器下的提示文字近似：?html5Validate支持我所知的HTML5驗(yàn)證相關(guān)的東西，如type="email",?type="number",?type="tel",?type="url",?step,?min,?max,?required,pattern,?multiple等，并有一些本地化擴(kuò)展，如增加了type="zipcode"郵編等，支持type="hidden"的完整驗(yàn)證（HTML5
5、中是忽略的），支持多type共存，例如type="email
6、tel",可以讓文本框輸入郵箱或者手機(jī)號(hào)碼。type="date",?type="hour",?type="password"等因?yàn)椴煌W(wǎng)站規(guī)則不一樣，因此，沒有放在html5Validate中，不過，您可以很簡(jiǎn)單地進(jìn)行擴(kuò)展，使您的項(xiàng)目支持之，這個(gè)后面會(huì)介紹（參見part9-4）。為了滿足實(shí)際開發(fā)需求，額外增加了四個(gè)自定義屬性值：data-key,?data-target,?data-min,?data-max.具體何用，下面會(huì)詳細(xì)講解。支持自動(dòng)的全角轉(zhuǎn)半角。注意：type="s
7、ubmit",?type="reset",?type="file",?type="image"以及disabled的表單元素沒有驗(yàn)證性可言，因此，下面所說的表單元素，并不包括他們。兼容性html5Validate通過jQuery1.4+測(cè)試，支持正常IE6-IE10瀏覽器，F(xiàn)ireFox,Chrome等現(xiàn)代瀏覽器。三、demo、使用以及資源下載您可以狠狠地點(diǎn)擊這里：html5Validate表單驗(yàn)證jQuery插件測(cè)試demo//zxx:還有一些實(shí)際應(yīng)用的例子將會(huì)在本文后半部分展示。使用1.引用jQuery框架，示意：8、"http://code.jquery.com/jquery-1.6.4.min.js">2.引用html5Validate插件，示意：1.綁定調(diào)用：$().html5Validate(callback,options);示意，假設(shè)測(cè)試表單id為html5Form，則有：$("#html5Form").html5Validate(function
9、(){//全部驗(yàn)證通過，該干嘛干嘛~~});下載未壓縮版JS：jquery-html5Validate.js壓縮版JS：jquery-html5Validate-min.jszi
