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实现收缩菜单效果实例代码
Oct 30 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
vue-router的两种模式的区别
May 30 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 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安全编程之加密功能
2006/10/09 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
python进程与线程小结实例分析
2018/11/11 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
js实现自定义路由
2017/02/04 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
Python 元组(Tuple)操作详解
2014/03/11 Python
python中将字典转换成其json字符串
2014/07/16 Python
python实现简单购物商城
2016/05/21 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
python操作gitlab API过程解析
2019/12/27 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
护理专业大学生自我推荐信
2014/01/25 职场文书
体育教师个人总结
2015/02/09 职场文书
高中教师个人总结
2015/02/10 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
信仰观后感
2015/06/03 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL