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 相关文章推荐
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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
360通用php防护代码(使用操作详解)
2013/06/18 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
PHP云打印类完整示例
2016/10/15 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python回调函数的使用方法
2014/01/23 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
python tornado微信开发入门代码
2018/08/24 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python如何对齐字符串
2020/07/30 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
如何书写邀请函?
2019/06/24 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
JVM之方法返回地址详解
2022/02/28 Java/Android
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers