前端表单与验证架构：设计模式、状态管理与无障碍

function ControlledForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleChange = (e) => {
    setEmail(e.target.value);
    if (!e.target.value.includes('@')) {
      setError('Invalid email');
    } else {
      setError('');
    }
  };

  return (
    <input value={email} onChange={handleChange} />
    {error && <span>{error}</span>}
  );
}

function UncontrolledForm() {
  const emailRef = useRef<HTMLInputElement>(null);

  const handleSubmit = () => {
    console.log(emailRef.current?.value);
  };

  return <input ref={emailRef} defaultValue="" />;
}

即时验证：onChange/onBlur 时验证（用户体验好但频繁）
提交时验证：submit 时一次性验证（减少干扰但延迟反馈）
混合验证：onBlur 验证格式、submit 验证必填（平衡方案）
防抖验证：onChange + debounce（搜索/远程验证场景）

客户端：格式检查（email/phone）、长度限制、必填项
服务端：业务逻辑（唯一性/权限）、最终校验（防篡改）
# 原则：前端验证提升体验，后端验证保证安全——不可互相替代

位置：字段下方 or 字段右侧（靠近问题源）
颜色：红色（#error）+ 图标增强可识别
文案：具体可行动（不是"Invalid"而是"Email must contain @"）
时机：onBlur 显示、onFocus 清除、onChange 更新
# ARIA：aria-describedby 关联错误信息

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Password must be 8+ chars'),
  confirm: z.string()
}).refine(data => data.password === data.confirm, {
  message: "Passwords don't match",
  path: ['confirm']
});

function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema)
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      {errors.email && <span>{errors.email.message}</span>}
      <button type="submit">Submit</button>
    </form>
  );
}

function DynamicForm() {
  const { control, register, handleSubmit } = useForm();
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'items'
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`items.${index}.name`)} />
          <button type="button" onClick={() => remove(index)}>Remove</button>
        </div>
      ))}
      <button type="button" onClick={() => append({ name: '' })}>Add</button>
    </form>
  );
}

// 根据选择显示不同字段
const watchType = watch('type');

return (
  <form>
    <select {...register('type')}>
      <option value="personal">Personal</option>
      <option value="company">Company</option>
    </select>
    {watchType === 'company' && (
      <input {...register('taxId')} placeholder="Tax ID" />
    )}
  </form>
);

function FileUpload() {
  const [progress, setProgress] = useState(0);

  const handleUpload = async (file: File) => {
    const formData = new FormData();
    formData.append('file', file);

    const xhr = new XMLHttpRequest();
    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) {
        setProgress((e.loaded / e.total) * 100);
      }
    };

    xhr.open('POST', '/upload');
    xhr.send(formData);
  };

  return (
    <input
      type="file"
      onChange={(e) => e.target.files?.[0] && handleUpload(e.target.files[0])}
    />
    {progress > 0 && <progress value={progress} max={100} />}
  );
}

<div
  onDrop={(e) => {
    e.preventDefault();
    handleUpload(e.dataTransfer.files[0]);
  }}
  onDragOver={(e) => e.preventDefault()}
>
  Drop files here
</div>

- 非受控组件：不监听每次 onChange，减少重渲染
- 局部更新：只重渲染当前字段，不触发整个表单
- ref 注册：使用 ref 而非 state 绑定
# 对比：受控表单 50 个字段 → 每输入全表单重渲染
#       RHF 50 个字段 → 只更新当前字段

1) 拆分大表单为多个子表单组件
2) 用 memo 包裹不常变化的字段
3) 延迟验证（debounce 远程验证）
4) 虚拟化长列表（如选择器）
5) 图片预览用 URL.createObjectURL（不转 base64）

<label htmlFor="email">Email</label>
<input
  id="email"
  aria-required="true"
  aria-invalid={errors.email ? 'true' : 'false'}
  aria-describedby={errors.email ? 'email-error' : undefined}
  {...register('email')}
/>
{errors.email && (
  <span id="email-error" role="alert">{errors.email.message}</span>
)}

Tab 顺序：按逻辑顺序（从上到下）
Enter 提交：表单内 Enter 应提交（textarea 内除外）
Escape 取消：模态框内 Escape 关闭并恢复焦点
焦点管理：提交后焦点移到成功提示或第一个错误字段

role="alert"：错误提示立即播报
aria-live="polite"：非紧急更新（如保存成功）
aria-busy="true"：提交中状态
# 测试：ChromeVox/NVDA/VoiceOver

步骤 1（账户信息）→ 步骤 2（个人资料）→ 步骤 3（确认）→ 提交

状态：
  - currentStep: number
  - data: { step1: {}, step2: {}, step3: {} }
  - canGoNext: boolean（当前步骤验证通过）
  - isSubmitting: boolean

/step1 /step2 /step3
# 优点：刷新不丢进度、可直接进入某步、浏览器前进后退
# 实现：React Router / Next.js 动态路由 + 状态持久化（localStorage/session）

# 后端生成 CSRF Token → 表单隐藏字段
# <input type="hidden" name="csrf_token" value="..." />
# 或使用 SameSite Cookie（Strict/Lax）

const [isSubmitting, setIsSubmitting] = useState(false);

const onSubmit = async (data) => {
  if (isSubmitting) return;
  setIsSubmitting(true);
  try {
    await api.submit(data);
  } finally {
    setIsSubmitting(false);
  }
};

// 双重保险：后端幂等 Token（Idempotency-Key）

# 用户输入在显示时转义（React 自动做）
# 后端对输入做消毒（sanitize）
# 文件名上传时重命名（避免 .html/.js 执行）