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 =