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 相关文章推荐
JavaScript 原型链学习总结
Oct 29 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
JS document文档的简单操作完整示例
Jan 13 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开发工具之vs2005图解
2008/01/12 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
python模拟事件触发机制详解
2018/01/19 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
python 实现线程之间的通信示例
2020/02/14 Python
opencv+python实现均值滤波
2020/02/19 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
中科软笔试题和面试题
2014/10/07 面试题
2013年高中生自我评价
2013/10/23 职场文书
质量提升方案
2014/06/16 职场文书
2014年药剂科工作总结
2014/11/26 职场文书