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实现一个页面多个css样式实现
May 29 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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制作静态网站的模板框架(三)
2006/10/09 PHP
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
[00:11]战神迅矛
2019/03/06 DOTA
pyqt5自定义信号实例解析
2018/01/31 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
python实现键盘输入的实操方法
2019/07/16 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
通俗讲解python 装饰器
2020/09/07 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
医学毕业生自荐信
2013/10/11 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
入党函调证明材料
2014/12/24 职场文书