React-Hooks-Form 集成 Zod 校验库

使用 React Hook Form 和 Zod，我们可以轻松地创建一个功能丰富且校验严格的表单组件。这样不仅提升了用户体验，还确保了数据的正确性。希望本文能帮助你在项目中更好地集成表单校验功能，好了废话不多说，我们开始进入主题：

首先需要安装 react-hooks-form 官方的解析器 和 zod 校验库

npm install @hookform/resolvers zod

它不仅支持 Zod 校验库同时还支持目前各种主流的校验库比如：Yup、Zod、Joi、Ajv、Vest、Custom

具体查看官方文档： https://react-hook-form.com/docs/useform#resolver

我们就拿 Zod 举例：

import { useState } from "react";
import { SubmitHandler, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"

// 定义校验参数
const schema = z.object({
    name: z.string().min(1, { message: "名称不能为空" }),
    age: z.number().min(1, { message: "年龄不能小于1" }).max(99, { message: "年龄不能超过99" }),
})

type Schema = z.infer<typeof schema>

export default () => {
    const [defaultValues, setDefaultValues] = useState<Schema>({ name: "", age: 0 })
    const { register, handleSubmit, formState: { errors } } = useForm<Schema>({
        // 默认值
        defaultValues,
        // 配置校验解析器
        resolver: zodResolver(schema),
    });

    const onSubmit: SubmitHandler<Schema> = (data, event) => {
        // 阻止默认提交行为
        event?.preventDefault();

        console.log(data)
    }

    return (
        <>
            <form onSubmit={handleSubmit(onSubmit)}>
                <input {...register("name")} type="text" />
                <span>{errors.name && errors.name.message}</span>

                <input {...register("age")} type="text" />
                <span>{errors.age && errors.age.message}</span>

                <button type="submit">提交</button>
            </form>
        </>
    )
}

详细的校验配置信息可查看 Zod 官方文档：https://zod.dev/