javascript表單驗證 - Parsley.js使用和配置
更新時間：2013年01月25日 11:43:36 作者：
大家還記得我們曾經(jīng)介紹過的表單驗證jquery插件jquery.validationEngine吧;天介紹的Parsley同樣也可以幫助你只使用簡單的配置即可實現(xiàn)表單驗證功能，基于它的強(qiáng)大DOM-API,感興趣的你可以不要錯過了哦
在線演示
大家還記得我們曾經(jīng)介紹過的表單驗證jquery插件jquery.validationEngine吧，使用這個插件你不需要寫任何一行js代碼就可以生成一個功能強(qiáng)大的表單驗證功能。是不是超棒？ 今天介紹的Parsley同樣也可以幫助你只使用簡單的配置即可實現(xiàn)表單驗證功能，基于它的強(qiáng)大DOM-API。
主要特性
•基于超棒的用戶體驗
•超級方便配置
•超輕量級(壓縮后12K），支持jQuery和Zepto
•超簡單，只需要簡單配置DOM-API，類似jQuery的data API
•絕對免費
•可靠性非常好
內(nèi)建的驗證
•required：要求輸入
•Not blank：不能為空
•Min length：最小長度
•Max length：最大長度
•Range length：長度區(qū)間
•Min：最小值
•Max：最大值
•Range：區(qū)域值
•RegExp：正則表達(dá)式
•Equal To：等于
•Min check：檢查選擇的checkbox的最少數(shù)量
•Max check：檢查選擇的checkbox的最多數(shù)量
•Range check：檢查選擇的checkbox的區(qū)間數(shù)量
•Remote：ajax驗證
使用和配置Parsley.js非常的簡單，你只需要使用HTML的data屬性來配置html即可，如下：
<form id="demo-form" data-validate="parsley">
<label for="fullname">Full Name * :</label>
<input type="text" id="fullname" name="fullname" data-required="true" />
<label for="email">Email * :</label>
<input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />
<label for="website">Website :</label>
<input type="text" id="website" name="website" data-trigger="change" data-type="url" />
<label for="message">Message (20 chars min, 200 max) :</label>
<textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]"></textarea>
</form>
是不是很方便，并且文檔非常的完整，不過如果你需要使用中文，需要自己本地化一下，相信如果使用過的朋友一定會喜歡的！
大家還記得我們曾經(jīng)介紹過的表單驗證jquery插件jquery.validationEngine吧，使用這個插件你不需要寫任何一行js代碼就可以生成一個功能強(qiáng)大的表單驗證功能。是不是超棒？ 今天介紹的Parsley同樣也可以幫助你只使用簡單的配置即可實現(xiàn)表單驗證功能，基于它的強(qiáng)大DOM-API。
主要特性
•基于超棒的用戶體驗
•超級方便配置
•超輕量級(壓縮后12K），支持jQuery和Zepto
•超簡單，只需要簡單配置DOM-API，類似jQuery的data API
•絕對免費
•可靠性非常好
內(nèi)建的驗證
•required：要求輸入
•Not blank：不能為空
•Min length：最小長度
•Max length：最大長度
•Range length：長度區(qū)間
•Min：最小值
•Max：最大值
•Range：區(qū)域值
•RegExp：正則表達(dá)式
•Equal To：等于
•Min check：檢查選擇的checkbox的最少數(shù)量
•Max check：檢查選擇的checkbox的最多數(shù)量
•Range check：檢查選擇的checkbox的區(qū)間數(shù)量
•Remote：ajax驗證
使用和配置Parsley.js非常的簡單，你只需要使用HTML的data屬性來配置html即可，如下：
復(fù)制代碼 代碼如下:
<form id="demo-form" data-validate="parsley">
<label for="fullname">Full Name * :</label>
<input type="text" id="fullname" name="fullname" data-required="true" />
<label for="email">Email * :</label>
<input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />
<label for="website">Website :</label>
<input type="text" id="website" name="website" data-trigger="change" data-type="url" />
<label for="message">Message (20 chars min, 200 max) :</label>
<textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]"></textarea>
</form>
是不是很方便，并且文檔非常的完整，不過如果你需要使用中文，需要自己本地化一下，相信如果使用過的朋友一定會喜歡的！
相關(guān)文章
JavaScript canvas繪制圓形加載進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas繪制圓形加載進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了JS實現(xiàn)日期加減的方法，有需要的朋友可以參考一下2013-11-11
今天小編就為大家分享一篇獲取layer.open彈出層的返回值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript動態(tài)添加數(shù)據(jù)到表單并提交的幾種方式
這篇文章主要介紹了JavaScript動態(tài)添加數(shù)據(jù)到表單并提交,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-06-06
JavaScript事件學(xué)習(xí)小結(jié)（三）js事件對象
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)（三）js事件對象的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
JavaScript 中文轉(zhuǎn)拼音實現(xiàn)代碼 有些bug
在做項目時候遇到一個小小的顯示客戶部門名稱（拼音）的業(yè)務(wù)，就是在部門名稱下有相應(yīng)的拼音，而在現(xiàn)有的數(shù)據(jù)庫中沒有相應(yīng)字段，并且部門數(shù)量比較多，添加起來比較費時，就想能否在js中實現(xiàn)，在頁面中處理。2010-03-03
javascript中的遍歷方法有很多,今天主要總結(jié)一下這些遍歷方法如何跳出循環(huán),這篇文章主要給大家介紹了關(guān)于如何跳出map或者foreach循環(huán)的相關(guān)資料,需要的朋友可以參考下2023-11-11
JS實現(xiàn)數(shù)組/對象數(shù)組刪除其中某一項
這篇文章主要介紹了JS實現(xiàn)數(shù)組/對象數(shù)組刪除其中某一項，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
bootstrap3-dialog-master模態(tài)框使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap3-dialog-master模態(tài)框的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了微信小程序調(diào)用天氣接口并且渲染在頁面過程詳解，今天寫一個具體的例子，調(diào)用一個免費的天氣接口的api，并且把所獲取的內(nèi)容展示在前端的界面，前端界面與 iView Weapp結(jié)合,需要的朋友可以參考下2019-06-06