首页 > web前端 > js教程 > 正文

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

聖光之護
发布: 2025-08-12 21:02:01
原创
486人浏览过

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 的 setLocale 方法的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号