前言
在前端开发中，我们常常需要进行表单验证，保证用户输入的数据合法且满足业务规则。而 validatorjs 就是一款常用的前端表单验证的库，它提供了丰富的验证规则和自定义规则的支持。而在 TypeScript 中使用 validatorjs ，我们可以使用 @types/validatorjs 这个 npm 包在我们的项目中引入 validatorjs 的类型声明。
安装
在使用 @types/validatorjs 之前，我们需要先安装 validatorjs，可以通过 npm 包管理工具进行安装：
npm install validatorjs
接着，我们还需要安装 @types/validatorjs，通过以下命令进行安装：
npm install --save-dev @types/validatorjs
使用
安装完成后，我们就可以在 TypeScript 项目中愉快地使用 validatorjs 了。首先，我们需要引入 Validator 类型和 validate 函数:
import { Validator, validate } from 'validatorjs';创建验证器
接着，我们需要创建一个验证器实例，它接受两个参数：第一个为验证规则对象（以属性和规则组成的键值对形式），第二个为验证数据对象（以属性和值组成的键值对形式）。例如，我们要创建一个验证器用于验证用户注册过程中表单的合法性，我们可以这样做：
-- -------------------- ---- -------
----- ----- - -
----- ------------------------
------ -----------------
--------- ------------------------
---------------------- -------------------------------
--
----- ---- - -
----- ------
------ ----------------------
--------- --------------
---------------------- -------------
--
----- --------- - --- --------------- -------执行验证
验证器实例创建完成后，我们就可以执行验证操作了。通过 passes() 和 fails() 方法判断验证是否通过。
if (validator.passes()) {
// 验证通过
} else {
// 验证失败
}获取错误信息
如果验证失败，我们可以通过调用 errors.all() 或 errors.first() 方法获取错误信息。其中，all() 方法返回一个包含所有错误信息的对象，而 first() 方法返回第一个错误信息。
if (validator.fails()) {
console.log(validator.errors.all()); // 返回所有错误信息
console.log(validator.errors.first()); // 返回第一个错误信息
}自定义验证规则
除了默认提供的验证规则之外，我们还可以使用 extend() 方法扩展自定义验证规则：
-- -------------------- ---- -------
--------------------------- ------- ------- -- -
----- ----- - ----------------------
------ ------------------
---
----- ----- - -
------ ----------------
--
----- ---- - -
------ --------------
--
----- --------- - --- --------------- -------
-- -------------------- -
-- ----
- ---- -
-- ----
-在以上示例代码中，我们定义了一个 phone 规则，它验证字符串是否符合格式：“三个数字-三个数字-四个数字”。接着，我们将该规则添加到验证器实例中，并使用其进行验证。
总结
在 TypeScript 项目中使用 validatorjs 库非常方便，只需要在项目中安装 validatorjs 和 @types/validatorjs 包，即可引入 validatorjs 的类型声明，并使用其提供的丰富的验证规则和自定义规则。希望本篇文章能够对你在前端开发中进行表单验证有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/types-validatorjs