|
在線演示 大家還記得我們?cè)?jīng)介紹過(guò)的表單驗(yàn)證jquery插件jquery.validationEngine吧，使用這個(gè)插件你不需要寫任何一行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即可，如下： 復(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ò)如果你需要使用中文，需要自己本地化一下，相信如果使用過(guò)的朋友一定會(huì)喜歡的！ |
|
|
來(lái)自： herowuking > 《Web前端》
