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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 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 header下载函数
2014/01/31 PHP
php实现zip文件解压操作
2015/11/03 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
微信小程序签到功能
2018/10/31 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
python的列表List求均值和中位数实例
2020/03/03 Python
浅析NumPy 切片和索引
2020/09/02 Python
Python collections模块的使用方法
2020/10/09 Python
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
给实习单位的感谢信
2014/02/01 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL