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入门教程(8) Location地址对象
Jan 31 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
keep-alive保持组件状态的方法
Dec 02 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处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
ThinkPHP安装和设置
2015/07/27 PHP
PHP中的session安全吗?
2016/01/22 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
js异或加解密效果代码
2008/06/25 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
python中树与树的表示知识点总结
2019/09/14 Python
python实现简单成绩录入系统
2019/09/19 Python
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
新浪网技术部笔试题
2016/08/26 面试题
学雷锋活动总结报告
2014/06/26 职场文书
作风建设整改方案
2014/10/27 职场文书
先进员工事迹材料
2014/12/20 职场文书
致青春观后感
2015/06/09 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang