前言
在前端开发中，表单验证是必不可少的，为了方便开发者实现表单验证，社区中有很多优秀的表单验证库。本文将介绍一款基于 Joi 和 Angular 的表单验证策略库 joi-validation-strategy，同时也适用于 React、Vue 和其他框架。
介绍 Joi 和 joi-validation-strategy
Joi 是 Node.js 中一个强大的验证库，它可以验证 JavaScript 对象是否符合特定规则，包括必填、最大长度、最小值等等。而 joi-validation-strategy 是在 Joi 基础上，与 Angular 组件结合，提供了更加专业的表单验证策略。
相较于其他表单验证库，joi-validation-strategy 具有以下几个优点：
当需要进行表单验证时，通过定义一组规则，只需要相应地执行验证即可，使表单验证变得非常简单。
如果需要将验证规则添加到现有的模型中，则 joi-validation-strategy 可以轻松实现这一目标。
joi-validation-strategy 还提供了许多预处理器和后处理器，以便流程更完整，便于使用。
安装 joi-validation-strategy
joi-validation-strategy 是一个 npm 包，所以在使用之前需要先安装。
npm install joi-validation-strategy --save
使用 joi-validation-strategy
下面将通过一个简单的表单示例来演示 joi-validation-strategy 的使用方法。首先，我们需要定义表单数据模型：
-- -------------------- ---- ------- ------ - -- --- ---- ------------ ------ --------- ---- - ----- ------- ---- ------- - ------ ----- ------------- - ------------ ----- ------------------------ ---- ----------------------------------------- --------------
Joi.schema 可以帮助我们定义我们的 User 模型，并检查我们的数据是否符合预期。现在，我们已经定义了 User 模型，接下来是定义 Angular 表单项的验证。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------ - ------------------ - ---- --------------------------
------ - ----- ------------- - ---- ----------------
------------
--------- ----------------
------------ -----------------------------
---------- -------------------------------
--
------ ----- ----------------- ---------- ------ -
--------- ----------
------------------- ------------------- ------------------------- --
----------- ---- -
------------- - --- -----------
----- --- --------------- ----
---- --- --------------- ----
---
-------------------------------------------------
---------------------------------- ----- --- ---- - ---
-------------------------------------------------------------
-------------------------------------------------------
-
-- 我们在 NgModule 中注入了 ValidationStrategy,
- 在 ngOnInit 生命周期中，我们初始化组件属性以及将模式、模型和观察值属性分配给验证策略。
此时，我们应该有能力将我们的表单项添加到 HTML 文件并绑定事件。
-- -------------------- ---- -------
----- -----------------------
-------
-----
------ ---------------------- --
--------
-------
-- --
----
------ --------------------- --
--------
-----------------------
-------对表单组件的验证
接下来，我们将添加一个表单验证函数。它将检查我们的模型是否符合 Joi.schema 的基础规则。
submitForm() {
this.validationStrategy.validate();
}这只是一个示例，因为 joi-validation-strategy 还有许多其他方法和管道可以使用，例如：
validate()：对提交表单时执行验证进程getModel<T>()：将表单控件和规则用作参数，并尝试将结果映射到指定类型的对象setError<T>()：设置指定字段的验证错误的消息setAllErrors<T>()：设置所有与当前表单相关的验证错误消息resetError<T>()：重置指定字段的验证错误消息resetAllErrors<T>()：重置当前表单项的所有验证错误消息
验证结果回显到用户面前
[verify-all-errors.pipe.ts] 内实现了一个 Angular 管道，使开发者有一种方式可用以处理多个错误消息，并将其回显到用户。
-- -------------------- ---- -------
------ - ----- ------------- - ---- ----------------
------ - ---------- - ---- --------------------------
------ - -------- - ---- -----------------
-------
----- ------------------
--
------ ----- ------------------- ---------- ------------- -
----------------- ------------- ---------------- ---------- -------- -
----- ------- -------- - ------------------
---------------- --
---------------------- -- -- --- ----------
- ------------------------
- ----
--
------ -------
-
-然后，可以在组件模板 HTML 文件中使用这个管道。
-- -------------------- ---- -------
---- -------------------------------------
---- ----------- ----- -- ------------------------------
-- ----- - ---------------- ------------ ------ ---------- --
------
------
---- --------------------------------------
---- ----------- ----- -- -------------------------------
-- ----- - ---------------- ------------ --
------
------这将生成一个简单的错误消息，告诉我们为什么无法提交表单。具体来说，我们可以看到将在控制台上传递错误消息的机制，以便在调试时进行查看。
this.validationStrategy.errors$.subscribe(console.log);
结论
在本文中，我们介绍了 joi-validation-strategy 这款基于 Joi 和 Angular 的表单验证策略库，以及它的优秀特性和基本用法。我们使用了一个简单的示例展示了 joi-validation-strategy 的使用方法，并演示了如何通过 validate() 方法执行表单验证进程以及如何将验证结果回显到用户面前。通过这篇文章，希望读者对 joi-validation-strategy 有了进一步的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad7db5cbfe1ea0610c7e