随着前端技术的发展，npm 已经成为了前端项目管理中不可缺少的一部分。npm 包的丰富性和可定制性为我们的开发工作带来了极大的便捷和效率。在这方面，cantina-validators 是一款非常实用的 npm 包。本文将对 cantina-validators 的使用进行详细介绍。
什么是 cantina-validators
cantina-validators 是一个基于 Joi 的表单验证器集合。cantina-validators 支持多种表单类型的验证，包括字符串、数字、日期等等。同时，cantina-validators 提供了多种错误提示的方式，包括自定义错误提示、默认的错误提示等等。
cantina-validators 的安装和引用
使用 npm 安装 cantina-validators 很简单，只需要在命令行中输入以下命令即可：
npm install cantina-validators
安装完毕后，我们可以在项目中引用 cantina-validators：
const validators = require('cantina-validators');cantina-validators 的使用方法
cantina-validators 的使用方法非常简单。我们只需要按照 Joi 的规则编写验证类型，并传入相应表单的值即可完成验证。下面，我们使用 cantina-validators 对一个简单的表单进行验证。
-- -------------------- ---- ------- ----- --- - --------------- ----- ---------- - ------------------------------ ----- ------ - ------------------- ----- ------------------------ ------ -------------------------------- ---- --------------------------------------------------- --- ----- ------ - - ----- ----- ------ ----------------------- ---- --- -- ----- ------ - --------------------------- ------- - ----------- ------ ------------- ------ --- --------------------
以上代码的作用是对一个包含 name、email、age 三个表单项的表单进行验证。其中，name 和 email 的格式必须符合相应的规则，age 必须为整型且在 18 到 100 之间。inputs 中存储了具体的表单项的值。schema 定义了表单项的验证规则。abortEarly 和 allowUnknown 分别表示在验证时是否要停止早期和是否要允许未知的表单项。最后，使用 validators.validate 函数进行验证，并将验证结果输出到控制台。
cantina-validators 的错误提示
cantina-validators 支持多种错误提示的方式。下面我们分别介绍一下这些方式。
使用默认错误提示
在使用 cantina-validators 进行表单验证时，可以直接使用默认的错误提示。下面是一个示例：
-- -------------------- ---- ------- ----- ------ - ------------------- ----- ------------------------ ------ -------------------------------- ---- --------------------------------------------------- --- ----- ------ - - ----- --- ------ ----------- ---- --- -- ----- ------ - --------------------------- -------- --------------------
在以上代码中，name 的值为空字符串，email 的值不符合 email 格式，age 的值小于 18。因此，验证结果将返回如下的错误提示信息：
{
name: '"" is not allowed to be empty',
email: '"email" must be a valid email',
age: '"age" must be larger than or equal to 18',
}自定义错误提示
有时，我们需要使用自定义的错误提示信息，以更好地与我们的页面设计相匹配。在 cantina-validators 中，我们可以通过传递以下参数来自定义错误提示：
options.message: 通用错误信息options.messages.string.base: 字符串验证错误信息options.messages.number.base: 数字验证错误信息options.messages.date.base: 日期验证错误信息
下面的示例演示了如何使用自定义错误提示：
-- -------------------- ---- -------
----- ------ - -------------------
----- ------------------------
------ --------------------------------
---- ---------------------------------------------------
---
----- ------ - -
----- ---
------ -----------
---- ---
--
----- ------ - --------------------------- ------- -
--------- -
-------------- -------------
--------------- -------------
-------------- ------------
------------- ------- -- ---
------------- ------- --- ---
--
---
--------------------在以上代码中，我们使用了自定义的错误提示信息。如果我们输入了空字符串、错误的 email 地址和小于 18 的年龄，则输出如下错误提示：
{
name: '请输入字符串格式的值',
email: '请输入正确的邮箱地址',
age: '年龄不得低于 18 岁',
}小结
cantina-validators 是一个非常实用的 npm 包，能够大大提高前端表单验证的效率。在使用 cantina-validators 进行表单验证时，我们可以使用默认的错误提示，也可以根据需要进行自定义。相信随着在使用过程中的不断探索，我们能够更好地使用 cantina-validators。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c93ccdc64669dde5ae6