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 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
jquery tab标签页的制作
May 10 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
js操作iframe父子窗体示例
May 22 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
浅谈webpack对样式的处理
Jan 05 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
Vue数据双向绑定底层实现原理
Nov 22 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获取参数的几种方法总结
2014/02/18 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
jquery.cookie.js使用指南
2015/01/05 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
js实现图片实时时钟
2020/01/15 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
Python3基础之list列表实例解析
2014/08/13 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Python sys模块常用方法解析
2020/02/20 Python
pandas参数设置的实用小技巧
2020/08/23 Python
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
写给保洁员表扬信
2014/01/08 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
六一儿童节标语
2014/10/08 职场文书
四风查摆剖析材料
2014/10/10 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
nginx常用命令放入shell脚本详解
2021/03/31 Servers
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL