SuperAPI AI 工具集

shadcn-impl-form-validation

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:在 shadcn/ui 中搭建端到端表单工作流,把 Form 组合组件与 react-hook-form、zod 串联起来,指导从 zod schema 定义、类型化提交处理器到服务端错误展示的五步流程。若七个 Form 原语不清晰,先读 shadcn-syntax-form;若不清楚如何把 Select、Checkbox、RadioGroup、Switch 绑定到 Controller,先读 shadcn-syntax-selectors。

主要能力:1)在模块作用域定义 zod schema(用 z.infer 推导类型),跨字段规则用 .refine 并设置 path;2)用 zodResolver 实例化 useForm,为每个字段提供显式默认值;3)组合 Form 原语,<Form> 展开 {...form},内层 <form> 传 onSubmit={form.handleSubmit(onValid)},每字段用 FormField 包裹并渲染 FormMessage;4)提交处理,onValid 中调用 API、映射服务端字段错误、成功后 reset;5)错误处理,用 form.setError 与 type: "server" 回填服务端错误,非字段错误用 "root.<key>";6)异步校验,.refine(async ...) 配合 300–500ms 防抖与 AbortController,form.formState.isValidating 反映进行中状态;7)文件上传,文件输入必须经 Controller 绑定,转发 e.target.files(FileList)而非单个 File;8)多步向导,用稳定的 FormProvider 包裹各步骤,前进前用 form.trigger(stepKey) 只校验当前步骤。

必要用法:绑定 Radix 封装控件(Select、Checkbox、RadioGroup、Switch、Slider、InputOTP)必须使用 Controller,禁止用 register;文件输入禁止用 register,因 FileList 会在重渲染时重置。提交按钮用 disabled={form.formState.isSubmitting} 防重复提交,不要用 isLoading(它反映异步 defaultValues 加载);isValidating 表示异步校验运行中。客户端能校验的交给 zod,setError 只用于服务端发现的错误,且避免在同一渲染周期混用。

适用场景:登录/注册、带确认密码的表单、邮箱可用性检查、优惠码校验、文件上传、多步向导等 shadcn/ui 表单场景。

限制:资料未提供该技能的安装命令、收费方式、平台支持与运行环境要求,暂未提供;详细 API 签名、示例与反模式见其 references 目录文件。