1. 什么是 @anyhowstep/validation 包
在前端开发过程中，表单验证是非常常见的操作。为了方便开发人员进行表单验证，有很多成熟的表单验证库可供选择。其中，@anyhowstep/validation 是一款优秀的表单验证库，可以有效地简化表单验证的代码。
@anyhowstep/validation 是一个基于 TypeScript 的表单验证库，可以很方便地在所有支持 TypeScript 的环境中应用。该库具有以下特点：
- 提供了一套简单而强大的验证 API，可用于检查输入是否符合特定要求。
- 支持自定义消息，可以方便地展示自己的错误信息。
- 支持自定义验证规则，可以根据具体的业务规则进行扩展。
- 支持异步验证。
2. 安装和使用
2.1 安装
使用 npm 进行安装：
--- ------- ----------------------
2.2 使用
在 TypeScript 中，我们可以通过以下方式使用 @anyhowstep/validation：
------ - --------- - ---- -------------------------
----- --------- - --- -----------
--------- -
--------- ----
--
------ -
--------- -----
------ ----
--
--------- -
--------- -----
---------- -
-
---
--------------------
--------- -------
------ ---------------------
--------- -------
---------- -- -
----------------------- ---------
----------------- -- -
--------------------
---上述代码中，我们首先通过 import 导入了 Validator 类，然后通过 new Validator 创建了一个验证器。在创建验证器时，我们需要传递一个对象，该对象中包含了要验证的字段及其验证规则。
字段名作为对象的键，而验证规则则作为值。在上述代码中，我们为 username、email、password 这三个字段分别定义了验证规则。
验证规则中，如果要求该字段必填，则可以设置 required: true。如果要求该字段为邮箱格式，则可以设置 email: true。如果要求该字段的长度不少于 6，则可以设置 minLength: 6。
最后，我们通过 validator.validate 方法对输入进行验证。如果验证通过，则返回一个 Promise 对象，并输出 Validation passed。如果验证失败，则 catch 方法会接收到一个错误信息数组。
3. 自定义消息
@anyhowstep/validation 提供了很方便的自定义消息功能，可以让我们展示自己的错误信息。
例如，我们可以修改上述代码中的密码长度为 5，然后添加一个自定义错误消息：
------ - --------- - ---- -------------------------
----- --------- - --- -----------
--------- -
--------- ----
--
------ -
--------- -----
------ ----
--
--------- -
--------- -----
---------- - -------- --------- - --- ------ - -
-
---
--------------------
--------- -------
------ ---------------------
--------- ------
---------- -- -
----------------------- ---------
----------------- -- -
--------------------
---上述代码中，我们在 minLength 规则中添加了一个 message 属性，指定了自定义的错误信息。当密码长度少于 6 位时，会显示该自定义错误信息。
4. 自定义验证规则
@anyhowstep/validation 还支持自定义验证规则，可以根据具体业务规则进行扩展。例如，我们可以创建一个规则，要求用户名必须是小写字母：
------ - ---------- ---- - ---- -------------------------
----- --------- - --- -----------
--------- -
--------- -----
---------- ----
-
---
-- -----------------
------------------------------ ------- ---- -- -
-- ------- ----- --- --------- -
------ ---------------------------
-
----- ---------------- - -------------
-- ------------------------------- -
------ ---------------------------
-
------ ------------------
---
--------------------
--------- ------
---------- -- -
----------------------- ---------
----------------- -- -
--------------------
---上述代码中，我们通过 validator.addRule 方法自定义了一个规则：lowercase。在自定义规则时，我们需要传递两个参数：
- 规则名：即
lowercase。 - 验证函数：该函数接收一个参数
value，表示待验证的值。如果验证通过，则返回Promise.resolve()；否则返回Promise.reject()。
在上述代码中，我们首先在验证器中添加了该规则，然后在 username 的验证规则中使用了该规则。该规则要求用户名必须全是小写字母。如果用户名不符合该规则，则会显示相应的错误信息。
5. 异步验证
有时，我们需要进行异步验证，例如在验证用户名是否已存在时。这时，我们可以使用 async 关键字来定义异步规则。
例如，我们可以创建一个异步规则，要求用户名在数据库中不存在：
------ - ---------- ---- - ---- -------------------------
----- --------- - --- -----------
--------- -
--------- -----
---------- -----
----- ------------- ----- ------------- -
-- ----------
----- ------ - ----- ---------------------------
-- -------- -
------ -------------------------
-
------ ------------------
-
-
---
-- ----
-------- -------------------------- -------- ---------------- -
------ --- --------------- -- -
------------- -- -
------------- --- ---------
-- ------
---
-
--------------------
--------- -------
---------- -- -
----------------------- ---------
----------------- -- -
--------------------
---上述代码中，我们定义了一个异步规则：unique。在异步规则中，我们可以使用 await 来进行异步操作。例如，在上述代码中，我们使用了一个 checkUsernameExists 函数来模拟检查用户名是否已存在的异步操作。
在规则中，如果遇到异步操作，则需要将该规则定义为异步规则，即添加 async 关键字，并返回一个 Promise 对象。
6. 总结
@anyhowstep/validation 是一款优秀的表单验证库，可以帮助开发人员高效地进行表单验证。在本文中，我们介绍了该库的安装和使用方法，以及自定义消息、自定义规则和异步验证等功能。
值得一提的是，在使用该库时，我们应该遵循 validation 的原则，即前端验证只是为了提高用户体验，不能替代后台验证。在实际开发过程中，应该通过前端验证来进行初步过滤和提示，然后通过后台验证来保证数据的安全和正确性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedae48b5cbfe1ea0610dff