简介
Parsley.js 是一个轻量级的前端表单验证库，它可以帮助开发人员在客户端验证用户输入。它支持多种数据类型验证，包括邮件地址、日期、数字等，并且可以自定义验证规则。本文将介绍如何使用 npm 包安装并使用 Parsley.js。
安装
使用 npm 包管理工具安装 Parsley.js：
npm install parsleyjs --save
配置
导入 Parsley.js 和相关样式文件：
<!-- 导入 parsley.js 文件 --> <script src="/node_modules/parsleyjs/dist/parsley.min.js"></script> <!-- 导入 parsley 样式文件 --> <link rel="stylesheet" href="/node_modules/parsleyjs/src/parsley.css">
在 HTML 表单元素上添加 data-parsley-validate 属性以启用 Parsley.js 表单验证：
<form id="myForm" data-parsley-validate> <!-- 表单控件 --> </form>
添加表单控件，并为需要验证的控件添加验证规则，如下所示：
<input type="email" name="email" required data-parsley-type="email" />
其中，required 属性表示该控件必填，data-parsley-type="email" 表示该控件必须是合法的邮件地址。Parsley.js 支持很多验证规则，具体可以参考官方文档。
调用
在 JavaScript 中，创建一个新的 Parsley 对象，然后调用其 validate() 方法即可对表单进行验证：
-- -------------------- ---- -------
----- ---- - ----------------------------------
----- ------- - --- --------------
------------------------------- -------- ------- -
-----------------------
-- ----
-- -------------------- -
-- -----------
--------------
-
---上述代码中，Parsley() 构造函数接受一个 HTML 表单元素作为参数，并返回一个 Parsley 对象。validate() 方法将返回布尔值，表示表单验证是否通过。
自定义验证规则
除了内置的验证规则外，我们还可以自定义验证规则。例如，我们可以添加一个自定义验证规则，要求密码必须包含大写字母和小写字母：
-- -------------------- ---- -------
-------------------------------- -
---------------- ---------
--------------- -------- ------- -
------ ------------------- -- --------------------
--
--------- -
--- ---- -------- ---- ------- ----- --- ----- -----------
-
---
-- - ---- ----------
------ --------------- --------------- -------- --------------------- --上述代码中，我们使用 addValidator() 方法添加一个名为 password 的验证规则。requirementType 属性指定该验证规则需要的数据类型为字符串，validateString() 方法根据正则表达式判断输入值是否符合要求。
在 HTML 控件上使用该验证规则时，我们可以通过添加 data-parsley-password 属性来指定使用该验证规则。
总结
本文介绍了如何使用 npm 包安装和配置 Parsley.js，以及对表单进行验证和自定义验证规则。Parsley.js 是一个功能强大而且易于使用的前端表单验证库，在开发中可以提高用户输入数据的准确性和安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32594
