javascript表单验证 - Parsley.js使用和配置
更新时间：2013年01月25日 11:43:36 作者：
大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧;天介绍的Parsley同样也可以帮助你只使用简单的配置即可实现表单验证功能，基于它的强大DOM-API,感兴趣的你可以不要错过了哦
在线演示
大家还记得我们曾经介绍过的表单验证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>
是不是很方便，并且文档非常的完整，不过如果你需要使用中文，需要自己本地化一下，相信如果使用过的朋友一定会喜欢的！
大家还记得我们曾经介绍过的表单验证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>
是不是很方便，并且文档非常的完整，不过如果你需要使用中文，需要自己本地化一下，相信如果使用过的朋友一定会喜欢的！
相关文章
RequireJS 可以帮助用户异步按需的加载 JavaScript 代码，并解决 JavaScript 模块间的依赖关系，提升了前端代码的整体质量和性能2017-04-04
这篇文章主要为大家详细介绍了如何利用JavaScript实现一个简单的月饼音乐播放器，文中的示例代码讲解详细，感兴趣的小伙伴可以尝试一下2022-09-09
这篇文章主要介绍了简单了解JavaScript中的new Function，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
本文主要介绍了函数四种调用模式以及其中的this指向的相关知识，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要给大家介绍了关于JS中数组合并的几种常见方法,在开发的过程中,我们很多时候会遇到需要将两个数组合并成一个数组的情况,文中通过实例代码介绍的非常详细,出现需要的朋友可以参考下2023-07-07
最近面试有道题是至少写出 15 个数组方法，数组方法平时经常用到的也就6-7个，突然要一下子写出15个，还是有点卡壳了，今天整理一波，需要的可以参考一下2022-05-05
这篇文章主要介绍了JS实现的4种数字千位符格式化方法分享,本文给出了4种千分位格式化方法并对它们的性能做了比较,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JavaScript实现文件下载并重命名代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
在javascript中，replace方法是属于String对象的，可用于替换字符串。今天我们就来详细探讨下一些replace()方法的使用2015-09-09
这篇文章主要介绍了全面解析Bootstrap图片轮播效果，Bootstrap提供了carousel插件，实现图片轮播非常方便，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
最新评论