Parsley.js 表单验证库使用指南与配置详解

Parsley.js 简介与核心优势

此前我们曾介绍过基于 jQuery 的表单验证插件 jquery.validationEngine，该插件允许用户无需编写任何 JavaScript 代码即可生成功能强大的表单验证效果。如今介绍的 Parsley.js 同样具备这一优势，只需进行简单的配置，即可利用其强大的 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 进行远程验证

HTML5 数据属性配置示例

Parsley.js 的使用和配置非常简便，只需在 HTML 元素中使用 data 属性进行配置即可，具体示例如下：

 
<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>

这种配置方式非常便捷，且官方文档十分完整。若需支持中文界面，用户需自行进行本地化处理。相信有过相关使用经验的开发者都会对其产生好感！