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开发随笔一 preventDefault的必要
Nov 25 Javascript
js函数排序的实例代码
Jul 01 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
javascript实现电商放大镜效果
Nov 23 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中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
php中session与cookie的比较
2015/01/27 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
javascript读取xml
2006/11/04 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
详解vue中axios的封装
2018/07/18 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
js html实现计算器功能
2018/11/13 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python类的用法实例浅析
2015/05/27 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
幼儿园标语大全
2014/06/19 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
大学学生会辞职信
2015/05/13 职场文书
感恩的心主题班会
2015/08/12 职场文书
无故旷工检讨书
2015/08/15 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
服务器间如何实现文件共享
2022/05/20 Servers