用戶體驗超棒并且功能強大使用簡單的javascript表單驗證 - Parsley.js

大家還記得我們曾經介紹過的表單驗證jquery插件jquery.validationEngine吧，使用這個插件你不需要寫任何一行js代碼就可以生成一個功能強大的表單驗證功能。是不是超棒？ 今天介紹的Parsley同樣也可以幫助你只使用簡單的配置即可實現表單驗證功能，基于它的強大DOM-API。

主要特性

• 基于超棒的用戶體驗
• 超級方便配置
• 超輕量級(壓縮后12K），支持jQuery和Zepto
• 超簡單，只需要簡單配置DOM-API，類似jQuery的data API
• 絕對免費
• 可靠性非常好

內建的驗證

• required：要求輸入
• Not blank：不能為空
• Min length：最小長度
• Max length：最大長度
• Range length：長度區間
• Min：最小值
• Max：最大值
• Range：區域值
• RegExp：正則表達式
• Equal To：等于
• Min check：檢查選擇的checkbox的最少數量
• Max check：檢查選擇的checkbox的最多數量
• Range check：檢查選擇的checkbox的區間數量
• 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>

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

via gbtags

來源：用戶體驗超棒并且功能強大使用簡單的javascript表單驗證 - Parsley.js