SuperAPI AI 工具集

react-hook-form-zod

前端与建站

查看项目

更新于 10-15 22:39

技能介绍

用途:在 React 中用 react-hook-form 结合 Zod 构建类型安全的校验表单,通过 @hookform/resolvers 提供的 zodResolver 把 Zod schema 接入 useForm。

主要能力:用 Zod 定义 schema 并用 z.infer 推断表单类型;useForm 支持 register、handleSubmit、watch、setValue、getValues、reset、trigger、control 等;可选择 onSubmit、onChange、onBlur、all 校验模式;用 Controller 或 useController 接入不自带 ref 的第三方组件;用 useFieldArray 处理动态字段;用 refine 做自定义与异步校验,用 transform 做数据转换;用 setError 映射服务端错误。

使用方式:安装 npm install react-hook-form@7.65.0 zod@4.1.12 @hookform/resolvers@5.2.2;定义 schema 后以 useForm({ resolver: zodResolver(schema), defaultValues }) 初始化,register 注册原生输入,handleSubmit 包裹提交函数。资料建议始终设置 defaultValues,并在服务端用同一 schema 再次校验,因为客户端校验可被绕过。

适用场景:登录、注册等表单,含数组或自定义组件的复杂表单,需要前后端共享校验与类型的前后端项目。

限制:资料未提供价格、授权、兼容范围与性能基准;除已列版本外,其他版本与平台支持暂未提供。