在jbranchaud/til项目中解析Zod模式验证的可读错误信息

在jbranchaud/til项目中解析Zod模式验证的可读错误信息

til :memo: Today I Learned 项目地址: https://gitcode.com/gh_mirrors/ti/til

作为前端开发者，我们经常需要处理表单验证和用户输入校验。Zod是一个强大的TypeScript-first模式声明和验证库，它提供了优雅的方式来定义数据结构并验证输入是否符合预期。本文将深入探讨如何从Zod模式解析中获取清晰、可读的错误信息，以便更好地展示给终端用户。

基础模式定义

首先，让我们看一个典型的Zod模式定义示例。假设我们正在开发一个博客系统，需要验证新文章的输入数据：

const NewPostSchema = z.object({
  title: z.string().min(1, "Title is required"),
  slug: z.string().min(1, "Slug is required"),
  markdown: z.string().min(1, "Markdown is required"),
});

在这个模式中，我们定义了三个必填字段：title（标题）、slug（URL标识）和markdown（内容）。每个字段都要求至少包含1个字符，否则会返回相应的错误信息。

验证输入数据

当用户提交表单时，我们可以使用safeParse方法来验证输入数据：

const result = NewPostSchema.safeParse(userInput);

safeParse方法会返回一个结果对象，其中包含验证是否成功的标志和详细的错误信息（如果有的话）。

原始错误信息分析

如果验证失败，我们可以访问result.error来获取详细的错误信息：

if(!result.success) {
  console.log(result.error);
  // 输出示例:
  // ZodError: [
  //   {
  //     "code": "too_small",
  //     "minimum": 1,
  //     "type": "string",
  //     "inclusive": true,
  //     "exact": false,
  //     "message": "Slug is required",
  //     "path": [
  //       "slug"
  //     ]
  //   }
  // ]
}

虽然这些信息非常详细，包含了错误代码、最小长度要求、错误路径等，但对于终端用户来说可能过于技术化且不易理解。

简化错误信息

为了提供更好的用户体验，我们可以使用Zod提供的flatten方法来简化错误信息：

if(!result.success) {
  const simplifiedErrors = result.error.flatten().fieldErrors;
  console.log(simplifiedErrors);
  // 输出示例: { slug: [ 'Slug is required' ] }
}

flatten方法将复杂的错误结构转换为更简单的对象形式，其中：

• 键是字段名
• 值是该字段对应的错误消息数组

这种格式非常适合直接用于表单验证反馈，可以轻松地将其映射到表单字段旁边显示错误提示。

实际应用建议

在实际项目中，我们可以进一步封装这个错误处理逻辑：

1. 创建通用错误处理函数：

function getValidationErrors(error) {
  return error.flatten().fieldErrors;
}

2. 在表单组件中使用：

const result = NewPostSchema.safeParse(formData);
if (!result.success) {
  const errors = getValidationErrors(result.error);
  // 将errors对象传递给UI组件显示错误
}

3. 多语言支持： 对于国际化应用，可以在模式定义中使用动态错误消息：

const NewPostSchema = z.object({
  title: z.string().min(1, i18n.t('validation.titleRequired')),
  // 其他字段...
});

高级错误处理

除了简单的字段错误外，Zod还支持更复杂的验证场景：

1. 嵌套对象验证：

const UserSchema = z.object({
  name: z.string(),
  posts: z.array(NewPostSchema)
});

2. 自定义验证逻辑：

const UniqueSlugSchema = z.string().refine(
  async (slug) => !(await db.post.exists({ slug })),
  "Slug already exists"
);

对于这些复杂场景，flatten方法同样适用，它会递归处理嵌套的错误结构。

总结

通过使用Zod的safeParse和flatten方法，我们可以：

• 轻松实现强大的表单验证
• 获取清晰、可读的错误信息
• 提供更好的用户体验
• 保持代码的简洁和可维护性

记住，良好的错误处理不仅能提高应用质量，还能显著改善用户体验。Zod提供的这些工具让我们能够以最小的努力实现这一目标。

til :memo: Today I Learned 项目地址: https://gitcode.com/gh_mirrors/ti/til