前幾天分享過如何使用 react-hook-form 來處理表單的驗證。今天，我想介紹另一個強大的套件——ZOD，它可以與 react-hook-form 結合使用，提供更強大的 Schema 驗證功能。

安裝npm套件

"zod": "^3.22.4",
"@hookform/resolvers": "^3.3.4",

首先，我們先來定義一個登入表單的 Schema：

import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import type { DefaultValues } from "react-hook-form";

/** - 登入`schema` */
export const schema = z.object({
  username: z
    .string({ required_error: "請輸入帳號" })
    .trim()
    .min(1, { message: "請輸入帳號" }),
  password: z
    .string({ required_error: "請輸入密碼" })
    .trim()
    .min(1, { message: "請輸入密碼" }),
});

/** - 登入`schema`型別 */
export type SchemaType = z.infer<typeof schema>;

/** - 登入預設值 */
export const defaultValues: DefaultValues<SchemaType> = {};

/** - 登入解析器 */
export const resolver = zodResolver(schema);

雖然react-hook-form 已經有強大驗證功能，認為 ZOD 結合更多強大功能性為表單的驗證更加靈活

• zodResolver 結合 react-hook-form：我們使用 zodResolver 將 ZOD 定義的 Schema 直接結合到 react-hook-form，這樣我們可以在表單提交時自動進行驗證。

• Schema 定義：在這個範例中，我們定義了 username 和 password 兩個欄位的驗證規則，要求它們不能為空，並且在驗證失敗時提供自訂的錯誤訊息。

• 預設值：為表單定義預設值，可以讓表單在初始化時有合理的初始狀態。

頁面上使用

import { SchemaType, resolver, defaultValues } from "@/form/signIn";

const { handleSubmit, control, reset } = useForm<SchemaType>({
    resolver,
    defaultValues,
});

如這個頁面有多份驗證，則是可以在匯入時透過取別名 as 方式來區別，例如：

import {   resolver as singUpResolver, defaultValues as signUpDadaultValues } from "@/form/signUp";

const { handleSubmit, control, reset } = useForm<SchemaType>({
    resolver:singUpResolver,
    defaultValues:signUpDadaultValues,
});