这次我们将详细介绍如何利用React Hook Form和Zod来高效进行多个表单字段的验证。

开发环境

• react-hook-form: v7.15.4

zod: v3.11.6

首先

React Hook Form是一种用于在React中高效进行表单验证的库。通过使用React Hook Form，可以轻松实现获取表单字段值、验证和显示错误消息等功能。

一方面，Zod是一款针对TypeScript的验证库，它可以简单地定义验证模式，并支持自定义验证。通过将React Hook Form和Zod结合使用，您可以使用简洁易懂的代码来实现包含复杂验证的表单。

在Zod中对一个字段进行验证

首先，让我们来看看如何使用Zod来创建一个关于一个字段的验证。在这里，我们设置了一个验证规则来确保字段firstName不为空字符串。

import { z } from 'zod';

export const profileSchema = z
    .object({
        firstName: z.string().nonempty('名は入力必須項目です'),
        // 他のフィールド...
    });

在Zod中跨多个领域的验证

如果能够对单个字段进行验证，那么接下来我们尝试设置跨多个字段的验证。在下面的例子中，我们也将对lastName进行验证，并且还将添加一个验证，确保firstName和lastName中的任意一个都不为空。

export const profileSchema = z
    .object({
        lastName: z.string().nonempty('姓は入力必須項目です'),
        firstName: z.string().nonempty('名は入力必須項目です'),
        // 他のフィールド...
    })
    .refine((data) => data.lastName !== '' || data.firstName !== '', {
        path: ['lastName', 'firstName'],
        message: '姓と名のどちらか一つは入力してください'
    });

在React Hook Form中显示错误消息

我们来看一下如何将Zod定义的验证模式集成到React Hook Form中，并显示错误消息。

首先，我们将使用useForm钩子获取register和errors。register是一个函数，用于将表单字段注册到React Hook Form，而errors是一个包含每个字段错误信息的对象。

然后，将register分配给每个表单字段，并在出现错误时从errors中显示相应的错误消息。

import { useForm } from "react-hook-form";
import { profileSchema } from "./validation";

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

return (
    <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("firstName")} />
        {errors.firstName && <p>{errors.firstName.message}</p>}

        <input {...register("lastName")} />
        {errors.lastName && <p>{errors.lastName.message}</p>}
        
        {/* 他のフィールド... */}

        <input type="submit" />
    </form>
);

如果上述代码中，每个表单字段在验证失败时会显示相应的错误消息。

使用React Hook Form和Zod，可以实现对多个字段进行验证的方法。通过组合使用这些库，可以有效地进行表单验证。请务必试一试。