简单强大的javascript表单验证 - Parsley.js

如果不需要写一行javascript代码就可以帮助你生成表单验证逻辑，是不是超棒？ 今天介绍的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>

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

效果图：

如需要此样式，必须映入：

 <link rel="stylesheet" href="index_data/style.css">

<!-- Javascript  -->
  <script src="index_data/jquery-1.js"></script>
  <script src="index_data/parsley.js"></script>

请参考地址：

http://www.gbtags.com/gb/demoviewer/281/e2fe93eb-92c7-47b2-8141-b9526831292f/index.html.htm