Zod Validation Error 使用教程

项目介绍

zod-validation-error 是一个用于处理 Zod 验证错误消息的开源库。Zod 是一个 TypeScript 优先的验证库，而 zod-validation-error 则旨在简化从 Zod 验证错误中提取和格式化错误消息的过程。这个库可以帮助开发者更轻松地处理表单验证和其他需要复杂验证逻辑的场景。

项目快速启动

安装

首先，你需要安装 zod 和 zod-validation-error：

npm install zod zod-validation-error

基本使用

以下是一个简单的示例，展示如何使用 zod-validation-error 来处理 Zod 验证错误：

import { z } from 'zod';
import { fromZodError } from 'zod-validation-error';

const schema = z.object({
  username: z.string().min(3).max(20),
  email: z.string().email(),
});

try {
  schema.parse({ username: 'ab', email: 'invalid-email' });
} catch (err) {
  if (err instanceof z.ZodError) {
    const validationError = fromZodError(err);
    console.error(validationError.message);
  }
}

在这个示例中，我们定义了一个包含 username 和 email 字段的验证模式。当验证失败时，fromZodError 函数会将 Zod 错误转换为一个更易读的错误消息。

应用案例和最佳实践

表单验证

在 Web 开发中，表单验证是一个常见的应用场景。使用 zod-validation-error 可以简化错误消息的处理，提升用户体验。

import { z } from 'zod';
import { fromZodError } from 'zod-validation-error';

const userSchema = z.object({
  name: z.string().min(2),
  age: z.number().int().positive(),
});

const userData = { name: 'A', age: -1 };

try {
  userSchema.parse(userData);
} catch (err) {
  if (err instanceof z.ZodError) {
    const validationError = fromZodError(err);
    console.error(validationError.message);
  }
}

API 请求验证

在处理 API 请求时，使用 Zod 进行数据验证可以确保接收到的数据符合预期格式。结合 zod-validation-error，可以更方便地返回友好的错误信息。

import { z } from 'zod';
import { fromZodError } from 'zod-validation-error';

const apiSchema = z.object({
  id: z.string().uuid(),
  amount: z.number().positive(),
});

const requestData = { id: 'invalid-uuid', amount: -100 };

try {
  apiSchema.parse(requestData);
} catch (err) {
  if (err instanceof z.ZodError) {
    const validationError = fromZodError(err);
    console.error(validationError.message);
  }
}

典型生态项目

Zod

zod-validation-error 是建立在 Zod 之上的一个库。Zod 是一个强大的 TypeScript 验证库，提供了丰富的验证功能和类型推断能力。

React Hook Form

在 React 项目中，结合 react-hook-form 和 Zod 可以实现强大的表单验证功能。zod-validation-error 可以帮助你更优雅地处理表单验证错误。

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { fromZodError } from 'zod-validation-error';

const schema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
});

const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: zodResolver(schema),
});

const onSubmit =