javascript表单验证 - Parsley.js使用和配置


Posted in Javascript onJanuary 25, 2013

在线演示
大家还记得我们曾经介绍过的表单验证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 相关文章推荐
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
js生成的验证码的实现与技术分析
Sep 17 Javascript
jquery操作select方法汇总
Feb 05 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
jQuery设计思想
Mar 07 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 #Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 #Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 #Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 #Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 #Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 #Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 #Javascript
You might like
php自动获取目录下的模板的代码
2010/08/08 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
JsRender for object语法简介
2014/10/31 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
Python去掉字符串中空格的方法
2014/03/11 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
Python退火算法在高次方程的应用
2018/07/26 Python
python实现自动解数独小程序
2019/01/21 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
一些.net面试题
2014/10/06 面试题
家长对孩子评语
2014/01/30 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
保密协议书范本
2014/04/22 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
保研推荐信格式
2015/03/25 职场文书