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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
理解JS事件循环
2016/01/07 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
python简单实现获取当前时间
2016/08/27 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
大学生求职推荐信
2013/11/27 职场文书
技术人员面试提纲
2013/11/28 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
乔迁之喜主持词
2014/03/27 职场文书
员工生日活动方案
2014/08/24 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
转正申请报告格式
2015/05/15 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python