用户体验超棒并且功能强大使用简单的javascript表单验证 - Parsley.js

待我称王封你为后i 2022-04-01 12:20 148阅读 0赞

日期：2013-1-23  来源：[GBin1.com][]

[![用户体验超棒并且功能强大使用简单的javascript表单验证 - Parsley.js][javascript_ - Parsley.js]][javascript_ - Parsley.js_javascript_ - Parsley.js]

[在线演示][Link 1]

大家还记得我们曾经介绍过的[表单验证jquery插件jquery.validationEngine][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>

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

来源：[用户体验超棒并且功能强大使用简单的javascript表单验证 - Parsley.js][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130123-js-form-validation-parsleyjs/
[javascript_ - Parsley.js]: http://www.gbin1.com/technology/javascript/20130123-js-form-validation-parsleyjs/title.jpg
[javascript_ - Parsley.js_javascript_ - Parsley.js]: http://www.gbin1.com/technology/javascript/20130123-js-form-validation-parsleyjs/index.html
[Link 1]: http://gbin1.com/gb/share/281.htm
[jquery_jquery.validationEngine]: http://www.gbin1.com/technology/jquery/20111026formvalidationwithjqueryvalidationengine/