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 location.replace与location.reload的区别
Sep 08 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
PHP类中Static方法效率测试代码
2010/10/17 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
discuz目录文件资料汇总
2014/12/30 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
php post换行的方法
2020/02/03 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
JS跨域请求的问题解析
2018/12/03 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python算术运算符实例详解
2017/05/31 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
基于Python实现扑克牌面试题
2019/12/11 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
python输入中文的实例方法
2020/09/14 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
工程概预算专业毕业生求职信
2013/10/04 职场文书
市场营销毕业生自荐信
2013/11/23 职场文书
大学四年职业生涯规划书范文
2014/01/02 职场文书
计划生育工作汇报
2014/10/28 职场文书
特岗教师个人总结
2015/02/10 职场文书
决心书格式范文
2015/09/23 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
nginx rewrite功能使用场景分析
2022/05/30 Servers