在前端开发中，表单验证是常见的需求之一。但是实现起来却十分繁琐，需要编写很多的代码。因此，许多开发者都选择使用现成的表单验证库来简化工作流程。
其中，@pinkyo/validatorjs 是一个很好的选择。它是一个基于 JavaScript 的表单验证库，支持多种验证规则，只需一行代码就可以完成表单验证。
本文将介绍如何使用 @pinkyo/validatorjs 进行表单验证。
安装
使用 npm 进行安装：
npm i @pinkyo/validatorjs
快速上手
假设我们有一个表单，其中有两个输入框：一个是用户名，另一个是邮箱。我们需要对它们进行验证。
首先，需要在 HTML 文件中添加表单元素：
-- -------------------- ---- -------
----- ----------
-------
----
------ ----------- ----------------
--------
----
-------
---
------ ------------ -------------
--------
----
------- -------------------------
-------然后，我们需要通过 JavaScript 获取表单元素，并为其添加验证规则：
-- -------------------- ---- ------- ------ --------- ---- ---------------------- ----- ---- - -------------------------------- ----- ----- - - --------- ------------------ ------ ----------------- -- ----- -------- - - --------- ----------- ------ ------- ----------- -------- ------ ----------- -------------- -- ----- --------- - --- --------------- ------ ----------
首先，我们使用 ES6 的 import 语法引入了 @pinkyo/validatorjs。然后，定义了一个 rules 对象，它包含了每个输入框的验证规则。例如，username 表示必填项且必须是字符串，email 表示必填项且必须是有效的电子邮件地址。
接下来，我们定义了一个 messages 对象，用于在验证失败时显示错误信息。例如，当输入框为空或格式不正确时，会显示 messages 中的对应的值。
最后一步，实例化 Validator 类，并将表单、rules 和 messages 作为参数传递给它。这样，我们就完成了表单验证的设置。
验证表单
在表单提交时，我们需要执行 validate() 方法来验证输入框的值是否符合规则：
-- -------------------- ---- -------
------------------------------- ------- -- -
-----------------------
-- ---------------------- -
----------------------
- ---- -
----------------------
-
---首先，通过 preventDefault() 方法取消了默认的表单提交事件。然后，调用 validate() 方法来验证表单，如果验证通过则输出“表单验证通过”，否则输出“表单验证失败”。
自定义验证规则
@pinkyo/validatorjs 支持自定义验证规则。只需在 rules 对象中添加规则名称和对应的验证函数即可。
例如，我们想要验证身份证号码的格式是否正确。可以定义一个 IdCardRule 规则，并添加一个 idCard() 方法实现验证逻辑：
Validator.register('IdCardRule', (value) => {
const regx = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dX]$/;
return regx.test(value);
}, '身份证号码格式不正确');在定义好规则后，就可以在 rules 对象中使用它：
const rules = {
username: 'required|string',
email: 'required|email',
idCard: 'required|IdCardRule',
};总结
本文介绍了如何使用 @pinkyo/validatorjs 进行表单验证，并且演示了自定义验证规则的方法。借助这个库，可以为我们的表单验证工作带来很大的便利。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568b881e8991b448e4849