登录
首页 >  文章 >  前端

Zod替代Yup设置全局错误提示

时间:2025-08-15 11:21:27 347浏览 收藏

哈喽!大家好,很高兴又见面了,我是golang学习网的一名作者,今天由我给大家带来一篇《Zod 全局错误提示设置替代 Yup 的 setLocale》,本文主要会讲到等等知识点,希望大家一起学习进步,也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧!

Zod 中设置全局错误消息:替代 Yup 的 setLocale 方法

本文将介绍如何在 Zod 中实现类似 Yup 的 setLocale 功能,用于设置全局自定义错误消息,特别是针对国际化 (i18n) 的场景。Zod 提供了 z.setErrorMap 方法来实现自定义错误映射,并推荐使用 zod-i18n 库来集成 i18next 实现国际化错误消息。本文将详细介绍如何使用这两种方法,并提供示例代码。

Zod 是一个流行的 TypeScript 优先的 schema 声明和验证库。与 Yup 类似,它允许你定义数据的结构和类型,并验证数据是否符合这些定义。但是,Zod 没有像 Yup 那样的 setLocale 方法来全局设置错误消息。不过,Zod 提供了 z.setErrorMap 方法,可以实现类似的功能。

使用 z.setErrorMap 自定义错误消息

z.setErrorMap 允许你定义一个函数,该函数接收一个 issue 对象和一个 ctx 对象作为参数,并返回一个包含自定义错误消息的对象。issue 对象包含了关于验证错误的详细信息,例如错误代码和预期类型。ctx 对象包含了上下文信息,例如默认错误消息。

以下是一个示例,展示了如何使用 z.setErrorMap 来自定义错误消息:

import { z } from "zod";

const customErrorMap: z.ZodErrorMap = (issue, ctx) => {
  if (issue.code === z.ZodIssueCode.invalid_type) {
    if (issue.expected === "string") {
      return { message: "必须是字符串!" };
    }
  }
  if (issue.code === z.ZodIssueCode.custom) {
    return { message: `最小值应大于 ${(issue.params || {}).minimum}` };
  }
  return { message: ctx.defaultError };
};

z.setErrorMap(customErrorMap);

const schema = z.string().min(5);

const result = schema.safeParse("abc");

if (!result.success) {
  console.log(result.error.issues);
}

在这个例子中,我们定义了一个名为 customErrorMap 的函数,它根据 issue.code 和 issue.expected 属性来返回不同的错误消息。如果 issue.code 是 z.ZodIssueCode.invalid_type 并且 issue.expected 是 "string",则返回 "必须是字符串!" 错误消息。如果 issue.code 是 z.ZodIssueCode.custom,则返回一个基于 issue.params 的自定义错误消息。否则,返回默认错误消息。

使用 zod-i18n 进行国际化

对于国际化 (i18n) 的场景,Zod 官方推荐使用 zod-i18n 库。zod-i18n 是一个 Zod 的扩展,它允许你使用 i18next 来翻译错误消息。

首先,你需要安装 zod-i18n 和 i18next:

npm install zod-i18n i18next

然后,你需要配置 i18next 并加载你的语言翻译文件。以下是一个示例:

import i18next from "i18next";
import { z } from "zod";
import { zodI18nMap } from "zod-i18n-map";
import translation from "zod-i18n-map/locales/zh-CN/zod.json"; // 引入中文翻译

i18next.init({
  lng: "zh-CN", // 设置语言
  resources: {
    "zh-CN": { zod: translation }, // 加载翻译文件
  },
});

z.setErrorMap(zodI18nMap);

const schema = z.string().email();

try {
  schema.parse("foo");
} catch (error) {
  if (error instanceof z.ZodError) {
    console.log(error.errors); // 输出中文错误信息
  }
}

在这个例子中,我们首先初始化 i18next,设置语言为 "zh-CN",并加载中文翻译文件。然后,我们使用 z.setErrorMap(zodI18nMap) 来设置错误映射。最后,我们定义一个 schema 并尝试解析一个无效的 email 地址。如果解析失败,我们将输出中文错误信息。

注意事项:

  • 确保你的翻译文件包含所有 Zod 错误代码的翻译。
  • zod-i18n 依赖于 i18next,因此你需要正确配置 i18next。
  • zod-i18n 提供了多种语言的翻译文件,你可以根据需要选择使用。

总结

虽然 Zod 没有像 Yup 那样的 setLocale 方法,但你可以使用 z.setErrorMap 方法来自定义错误消息。对于国际化场景,zod-i18n 库是一个不错的选择,它可以让你轻松地使用 i18next 来翻译错误消息。通过结合 z.setErrorMap 和 zod-i18n,你可以实现灵活且可定制的错误处理,从而提高应用程序的用户体验。

好了,本文到此结束,带大家了解了《Zod替代Yup设置全局错误提示》,希望本文对你有所帮助!关注golang学习网公众号,给大家分享更多文章知识!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>