SuperAPI AI 工具集

react-hook-form-zod

前端与建站

查看项目

更新于 10-22 16:16

技能介绍

用途:该技能针对 React Hook Form 与 Zod 的表单开发与调试,适用于 schema 转换、受控组件、动态数组、多步表单以及异步服务端校验等任务。

主要能力:

  • 在动手前检查项目现有的表单约定,包括仓库说明、包清单与锁文件、已有表单组件和提交端点,并确认已安装的 React Hook Form、Zod、resolver 与 UI 组件版本。要求使用仓库的包管理器与兼容依赖,不因示例版本不同而替换版本。
  • 明确原始输入类型、解析后的输出、默认值、字段生命周期、服务端请求格式和错误响应结构,并将校验与载荷改动控制在请求范围内。
  • 提供基础表单模板与共享 schema;服务端校验模板展示对应的请求与校验响应;鉴权、授权与持久化需接入真实端点。
  • 原生输入使用 register;受控组件需将 value、change/blur 处理器、name 和 ref 映射到组件实际 API,仅在 props 匹配时展开 field,避免重复注册同一字段。
  • 需提供合适默认值,尤其避免受控值为 undefined;初始化后加载的数据使用项目的 reset/values 策略,并在需要时保留未保存的修改。
  • 当 schema 输入与输出不一致时,使用 useForm<z.input<typeof schema>, Context, z.output<typeof schema>>;z.infer 表示输出,不能单独作为转换场景的输入类型。
  • 在服务端边界校验不可信请求;原始输入契约一致时可共享 schema;若客户端发送转换后的输出,则用合适的服务端 schema 校验该传输格式,避免二次转换。
  • 将标签与错误描述关联到输入,使用明确的按钮类型,提交进行中防止重复提交,并暴露可恢复的失败信息。
  • 仅在多步表单、数组、受控组件、转换、异步校验或性能优化时查阅高级模式。

使用方式:按“检查现有表单契约—实现最小匹配模式—验证行为”的流程推进。完成后运行仓库要求的检查与相关测试,验证有效/无效提交、错误位置、请求结构、服务端拒绝和重试行为;多步表单验证前进/后退是否保留预期值,数组验证删除/重排是否作用于目标项;用 TypeScript 检查转换后的输入/输出类型。模板只是起点,不代表宿主应用已被测试。行为不确定时查阅所安装版本的官方文档。

限制:资料未提供收费、价格、平台支持范围或具体性能数据;实际效果取决于项目已安装版本与真实端点。