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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
Javascript writable特性介绍
Feb 27 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 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
做个自己站内搜索引擎
2006/10/09 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
js中的闭包学习心得
2018/02/06 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
python基于win32api实现键盘输入
2020/12/09 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
scrapy-splash简单使用详解
2021/02/21 Python
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
init进程的作用
2015/08/20 面试题
银行求职推荐信范文
2013/11/30 职场文书
倡议书格式范文
2014/04/14 职场文书
工作鉴定评语
2014/05/04 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
工人先进事迹材料
2014/12/26 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书