javascript表單驗(yàn)證 - Parsley.js使用和配置

2024-05-06 14:19:43

字體：大中小

供稿：網(wǎng)友

在線演示
大家還記得我們?cè)?jīng)介紹過(guò)的表單驗(yàn)證jquery插件jquery.validationEngine吧，使用這個(gè)插件你不需要寫(xiě)任何一行js代碼就可以生成一個(gè)功能強(qiáng)大的表單驗(yàn)證功能。是不是超棒？今天介紹的Parsley同樣也可以幫助你只使用簡(jiǎn)單的配置即可實(shí)現(xiàn)表單驗(yàn)證功能，基于它的強(qiáng)大DOM-API。

主要特性
•基于超棒的用戶體驗(yàn)
•超級(jí)方便配置
•超輕量級(jí)(壓縮后12K），支持jQuery和Zepto
•超簡(jiǎn)單，只需要簡(jiǎn)單配置DOM-API，類似jQuery的data API
•絕對(duì)免費(fèi)
•可靠性非常好

內(nèi)建的驗(yàn)證
•required：要求輸入
•Not blank：不能為空
•Min length：最小長(zhǎng)度
•Max length：最大長(zhǎng)度
•Range length：長(zhǎng)度區(qū)間
•Min：最小值
•Max：最大值
•Range：區(qū)域值
•RegExp：正則表達(dá)式
•Equal To：等于
•Min check：檢查選擇的checkbox的最少數(shù)量
•Max check：檢查選擇的checkbox的最多數(shù)量
•Range check：檢查選擇的checkbox的區(qū)間數(shù)量
•Remote：ajax驗(yàn)證
使用和配置Parsley.js非常的簡(jiǎn)單，你只需要使用HTML的data屬性來(lái)配置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>

是不是很方便，并且文檔非常的完整，不過(guò)如果你需要使用中文，需要自己本地化一下，相信如果使用過(guò)的朋友一定會(huì)喜歡的！

上一篇：表單元素的submit()方法和onsubmit事件應(yīng)用概述

下一篇：js中eval()函數(shù)和trim()去掉字符串左右空格應(yīng)用