当前位置：首页 > article >正文

React-Hooks-Form 集成 Zod 校验库

article 2024/11/15 23:54:19

React-Hooks-Form 集成 Zod 校验库

首先需要安装 react hooks form 官方提交的解析器

npm install @hookform/resolvers

再安装校验库

npm install 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>
        </>
    )
}