fec-form-handlinglisted

# 表单处理 ## 用途 管理表单状态、校验和提交，避免复杂表单输入卡顿。 ## 流程 1. 先识别框架、项目既有表单库、schema 校验库、组件库和复杂度；10+ 字段、动态字段、联动校验、文件上传、多步流程或输入卡顿时再引入专门表单方案。 2. 按项目栈选型：React 可考虑 React Hook Form + Zod；Vue 可考虑 vee-validate / FormKit + Zod、Yup 或 Valibot；简单表单可用框架原生状态和基础校验。 3. 用运行时 schema 或明确校验函数守住外部输入边界；TypeScript 类型可从 schema 推导，但不要只写 TS 类型。 4. 明确默认值、字段注册、受控/非受控边界和组件库适配；错误提示用 `aria-invalid`、`aria-describedby` 和 `role="alert"`。 5. 提交时处理 loading、服务端错误、重复提交和 reset；大型表单用局部订阅和子组件隔离控制重渲染。 ## React 快速开始 ```tsx import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { z } from "zod"; const loginSchema = z.object({ email: z.string().email("请输入有效的邮箱地址"), password: z.string().min(8, "密码至少 8 个字符"), }); type LoginForm = z.infer<typeof loginSchema>; export function LoginFormView() { const { register, handleSubmit, formState: { errors, isSubmitting }, } = useForm<LoginForm>({ resolver: zodResolver(loginSchema), defaultValues: { email: "", password: "" }, }); return ( <form onSubmit={handleSubmit((data) => api.login(data))} noValidate> <label htmlFor="email">邮箱</label> <input id="email" {...register("email")} aria-invalid={!!errors.email} /> {errors.email && <span role="alert">{errors.email.message}</span>} <label htmlFor="password">密码</label> <input id="password" type="password" {...register("password")} /> {errors.password && <span role="alert">{errors.password.message}</span>} <button disab