表单验证逻辑

请为以下表单生成验证逻辑：

表单字段：
- [字段1]：类型、规则（如必填、邮箱格式、长度限制）
- [字段2]：...

技术栈：[React Hook Form/VeeValidate/原生等]

要求：
1. 每个字段的验证规则
2. 实时验证
3. 错误提示信息
4. 提交前整体验证
5. 异步验证（如用户名重复检查）
6. 验证通过/失败样式建议

import { z } from 'zod';

const registerSchema = z.object({
  username: z
    .string()
    .min(3, '用户名至少3个字符')
    .max(20, '用户名最多20个字符')
    .regex(/^[a-zA-Z0-9_]+$/, '只能包含字母、数字、下划线'),
  email: z
    .string()
    .email('请输入有效邮箱'),
  password: z
    .string()
    .min(8, '密码至少8位')
    .regex(/[A-Z]/, '需包含大写字母')
    .regex(/[0-9]/, '需包含数字'),
  confirmPassword: z.string()
}).refine(data => data.password === data.confirmPassword, {
  message: '两次密码不一致',
  path: ['confirmPassword']
});

type RegisterForm = z.infer<typeof registerSchema>;