javascript表单验证 - Parsley.js使用和配置

186 阅读 0 评论 123 点赞

我是靠谱客的博主淡淡花瓣，最近开发中收集的这篇文章主要介绍javascript表单验证 - Parsley.js使用和配置，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在线演示
大家还记得我们曾经介绍过的表单验证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> 

是不是很方便，并且文档非常的完整，不过如果你需要使用中文，需要自己本地化一下，相信如果使用过的朋友一定会喜欢的！