表单状态管理（对比 Spring 表单绑定）

import { useState } from "react";
import type { FormEvent } from "react";

function RegisterForm() {
  // 痛点一：每个字段一份 state，十个字段十份样板
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [nickname, setNickname] = useState("");
  const [errors, setErrors] = useState<Record<string, string>>({});

  // 痛点三：校验散落在组件里，改规则得回这里翻
  const validate = () => {
    const next: Record<string, string> = {};
    if (!email.includes("@")) next.email = "邮箱格式不正确";
    if (password.length < 8) next.password = "密码至少 8 位";
    setErrors(next);
    return Object.keys(next).length === 0;
  };

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    if (!validate()) return;
    // 痛点一的余波：提交前还得手动把散件拼回 DTO
    submitToApi({ email, password, nickname });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      // 每个字段都要亲手接线：value + onChange 成对出现
      <button>注册</button>
    </form>
  );
}

import { useForm } from "react-hook-form";

interface RegisterValues {
  email: string;
  password: string;
  nickname: string;
}

function RegisterForm() {
  const { register, handleSubmit, formState: { errors } } =
    useForm<RegisterValues>();

  // 只有校验通过，onSubmit 才会被调用；values 已是拼好的对象
  const onSubmit = (values: RegisterValues) => {
    submitToApi(values); // { email, password, nickname }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <input {...register("email", { required: "邮箱必填" })} placeholder="邮箱" />
      {errors.email && <p className="error">{errors.email.message}</p>}

      <input {...register("password", { minLength: { value: 8, message: "至少 8 位" } })} type="password" />
      <input {...register("nickname")} placeholder="昵称" />
      <button type="submit">注册</button>
    </form>
  );
}

import { z } from "zod";

export const registerSchema = z.object({
  email: z.string().min(1, "邮箱必填").email("邮箱格式不正确"),
  password: z.string().min(8, "密码至少 8 位").regex(/[A-Z]/, "必须包含大写字母"),
  nickname: z.string().min(2, "昵称至少 2 个字符").max(20, "最多 20 个字符"),
  confirmPassword: z.string(),
  // input 收上来的都是 string，coerce 先转数字再校验
  age: z.coerce.number().int("年龄必须是整数").min(18, "未满 18 岁不能注册"),
}).refine((d) => d.password === d.confirmPassword, {
  message: "两次输入的密码不一致",
  path: ["confirmPassword"], // 错误挂在哪个字段上
});

// 类型从 schema 反推，DTO 类型不用手写两遍（第 28 篇展开）
export type RegisterValues = z.infer<typeof registerSchema>;

const form = useForm<RegisterValues>({
  resolver: zodResolver(registerSchema),
  defaultValues: { email: "", password: "", nickname: "", confirmPassword: "", age: 0 },
});

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { registerSchema, type RegisterValues } from "./registerSchema";

function RegisterForm() {
  const {
    register, handleSubmit, setError, reset,
    formState: { errors, isSubmitting },
  } = useForm<RegisterValues>({
    resolver: zodResolver(registerSchema),
    defaultValues: { email: "", password: "", nickname: "", confirmPassword: "", age: 0 },
  });

  const onSubmit = async (values: RegisterValues) => {
    try {
      const res = await fetch("/api/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(values),
      });
      if (!res.ok) {
        const body = await res.json();
        if (body.field === "email") {
          // 服务端说邮箱被占用：精确回流到对应字段
          setError("email", { message: "该邮箱已被注册" });
        } else {
          // 整表级错误放 root 槽位，不挂到任何 input 上
          setError("root", { message: body.message ?? "注册失败，请稍后再试" });
        }
        return;
      }
      reset(); // 成功：清空表单，回到 defaultValues
    } catch {
      setError("root", { message: "网络异常，请检查连接后重试" });
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <input {...register("email")} placeholder="邮箱" />
      {errors.email && <p className="error">{errors.email.message}</p>}
      // password / nickname / confirmPassword / age 同款写法，略

      {errors.root && <p className="error">{errors.root.message}</p>}
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "注册中…" : "注册"}
      </button>
    </form>
  );
}

useForm<RegisterValues>({
  resolver: zodResolver(registerSchema),
  mode: "onBlur",             // 离开输入框就校验
  reValidateMode: "onChange", // 提交过后，边改边校验
});