做网站用asp还是php好,公司简历模板免费,官网铺设,东莞软件开发培训React-Hooks-Form 集成 Zod 校验库
首先需要安装 react hooks form 官方提交的解析器
npm install hookform/resolvers再安装校验库
npm install zod它不仅支持 Zod 校验库同时还支持目前各种主流的校验库比如#xff1a;Yup、Zod、Joi、Ajv、Vest、Custom
具体查看官方文…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.infertypeof schemaexport default () {const [defaultValues, setDefaultValues] useStateSchema({ name: , age: 0 })const { register, handleSubmit, formState: { errors } } useFormSchema({// 默认值defaultValues,// 配置校验解析器resolver: zodResolver(schema),});const onSubmit: SubmitHandlerSchema (data, event) {// 阻止默认提交行为event?.preventDefault();console.log(data)}return (form onSubmit{handleSubmit(onSubmit)}input {...register(name)} typetext /span{errors.name errors.name.message}/spaninput {...register(age)} typetext /span{errors.age errors.age.message}/spanbutton typesubmit提交/button/form/)
}详细的校验配置信息可查看 Zod 官方文档https://zod.dev/
