register-form.md

register-form.md

基本信息

  • 类型: React 组件
  • 路径: ./src/components/auth/register-form.tsx

功能描述

用户注册表单组件，使用 React Hook Form 和 Zod 进行表单验证。包含用户名唯一性验证、邮箱格式验证和密码确认匹配验证。

导出内容

  • RegisterForm - 主组件函数
  • registerSchema - Zod 验证模式
  • RegisterFormValues - 表单值类型

Props

无

表单字段

字段验证规则说明
name最少 2 个字符用户显示名称
username必填，只能包含字母、数字和下划线用户名（唯一标识）
email必须为有效邮箱格式邮箱地址
password最少 6 个字符密码
confirmPassword必须与 password 一致确认密码

验证模式

const registerSchema = z.object({
  name: z.string().min(2, "Name must be at least 2 characters"),
  username: z.string().min(1, "Username is required")
    .regex(/^[a-zA-Z0-9_]+$/, "Username can only contain letters, numbers, and underscores"),
  email: z.string().email("Invalid email address"),
  password: z.string().min(6, "Password must be at least 6 characters"),
  confirmPassword: z.string(),
}).refine((data) => data.password === data.confirmPassword, {
  message: "Passwords do not match",
  path: ["confirmPassword"],
});

API 错误处理

错误类型处理方式
email_taken显示邮箱已被占用提示
username_taken显示用户名已被占用提示
其他显示通用错误信息

依赖

  • react - useState
  • next/navigation - useRouter
  • next-intl - useTranslations
  • react-hook-form - useForm
  • @hookform/resolvers/zod - zodResolver
  • zod - 数据验证
  • @/components/ui/* - Button, Input, Form
  • lucide-react - Loader2
  • sonner - toast 通知
  • @/lib/analytics - analyticsAuth
← 返回目录