在前端开发中，表单数据的输入校验是一项非常必要的工作。而随着前端技术的发展，现在使用 TypeScript 进行开发的情况越来越多，因此在表单数据校验上也需要支持 TypeScript。在这种情况下，npm 包 class-validator 就成为了一种非常好的选择。
本文将详细介绍 npm 包 class-validator 的使用方法，并给出使用示例。我们将从以下几个方面进行阐述：
- 安装和基本使用
- 自定义校验器
- 官方提供的一些校验方法
- 实例展示
1. 安装和基本使用
在使用 class-validator 之前，我们需要先安装它，可以使用以下命令进行安装：
npm install class-validator --save
在安装完成后，我们就可以开始使用它了，下面是使用基本示例：
-- -------------------- ---- -------
------ - --------- ---------- - ---- ------------------
----- ---- -
-------------
----- -------
-------------
--------- -------
-
----- ---- - --- -------
--------- - ---
------------- - -------
-------------------------- -- -
-- -------------- - -- -
-------------------- -- ------
- ---- -
--------------------
-
---在上面的示例中，我们首先定义了一个 User 类并使用了 class-validator 提供的装饰器 @IsNotEmpty() 来定义了 name 和 password 两个属性的必填校验规则。然后我们创建了一个 User 类的实例，并给了 name 和 password 两个属性不合法的值。最后，我们使用 validate() 方法对 user 实例进行校验，并将校验结果传递给一个回调函数来处理错误信息。
2. 自定义校验器
在上一节中，我们使用了官方提供的校验装饰器，而在实际开发中，我们通常还需要自定义一些比较个性化的校验规则。下面是一个简单的自定义校验器示例：
-- -------------------- ---- -------
------ - -------------------- ---------------------------- - ---- ------------------
---------------------- ----- --------------- ------ ----- --
------ ----- ------------ ---------- ---------------------------- -
------------- ------- -
------ --- - - --- --
-
---------------- -
------ ------- ---- -- ------
-
-在上述示例中，我们定义了一个自定义的校验器 IsEvenNumber，它用来校验传入的数字是否为偶数。在 @ValidatorConstraint() 装饰器中，我们将该校验器命名为 isEvenNumber，并将 async 属性设置为 false，表示该校验器是同步执行的。
注：若 async 属性设置为 true 则意味着传入的值会是一个 Promise，而在校验器内部我们则可以使用 async/await。
3. 官方提供的一些校验方法
class-validator 内置了很多基础的校验方法，例如：
- IsNotEmpty: 非空
- IsString: 必须是字符串类型
- IsNumber: 必须是数字类型
- IsBoolean: 必须是布尔类型
- IsArray: 必须是数组类型
- MaxLength: 最大长度
- MinLength: 最小长度
- Max: 最大值
- Min: 最小值
下面是一些使用示例：
-- -------------------- ---- -------
------ - ----------- --------- --------- - ---- ------------------
----- ---- -
-------------
----- -------
-----------
-------------- -
-------- ------- ------------ -----
--
--------- -------
-4. 实例展示
下面是一个使用 class-validator 进行表单数据校验的例子：
-- -------------------- ---- -------
------ - --------- -------- ----------- ----- - ---- ------------------
----- ------------ -
----------
------ -------
-------------
----- -------
-------------
--------- -------
--------
---- -------
-
----- ---- - --- ---------------
---------- - --------------
--------- - -------
------------- - ---
-------- - ---
-------------------------- -- -
-- -------------- - -- -
-------------------- -- ------
- ---- -
--------------------
-
---在这个例子中，我们定义了一个 RegisterForm 类，它有四个属性：email、name、password 和 age。我们使用了 @IsEmail()、@IsNotEmpty() 和 @IsInt() 等装饰器来定义它们的校验规则。最后，我们调用 validate() 方法对表单数据进行校验，再输出校验结果。
结语
在本文中，我们详细介绍了 npm 包 class-validator 的基本使用和自定义校验器的方法。同时，还介绍了官方提供的一些校验方法，并给出了一个具体的实例。希望本文能够帮助到开发者，提高开发效率，实现更好的表单数据校验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57855