# Zod + React Hook 形式 ## 模式定义 // lib/validations.ts 从 'zod' 导入 { z }；导出 const contactFormSchema = z.object({ name: z.string().min(2, '名称必须至少有 2 个字符'), email: z.string().email('请输入有效的邮箱'), 电话：z.string().可选()， message: z.string().min(10, '消息必须至少为 10 个字符'), }); 导出类型 ContactFormData = z.infer; 导出 const bookingRequestSchema = z.object({ 名称：z.string().min(2), 电子邮件：z.string().email(), 电话：z.string().可选()，目标：z.string().min(10), experienceLevel: z.enum(['初级', '中级', '高级']), 伤害：z.string().可选()，首选时间: z.string().min(5), sessionType: z.enum(['面对面', '在线']), }); 导出类型 BookingRequestData = z.infer; ## 客户端组件表单 '使用客户端'；从'react-hook-form'导入{useForm}；从 '@hookform/resolvers/zod' 导入 { zodResolver }；从 'next-intl' 导入 { useTranslations }；从 '@/lib/validations' 导入 { contactFormSchema, type ContactFormData }; 导入{ 形式，表单控件，表单字段，表单项，表单标签，表单消息，来自 '@/components/ui/form'; 从'@/components/ui/input'导入{输入}；从'@/components/ui/textarea'导入{Textarea}；从'@/components/ui/button'导入{Button}；导出函数 ContactForm() { const t = useTranslations('form'); const form = useForm({ 解析器：zodResolver(contactFormSchema), 默认值：{ 名称：''，电子邮件：''，电话：'', 消息：''， }, }); const onSubmit = async (数据: ContactFormData) => { 尝试{ const 响应 = 等待 fetch('/api/contact', { 方法：'POST'，正文：JSON.stringify（数据）， }); if (!response.ok) 抛出新的 Error(); 表单.重置(); // 显示成功 toast } 抓住 { // 显示错误提示 } }; 返回（ <表格{...表格}>

<表单域控制={form.control} 名称=“名称” 渲染={({字段})=>( <表单项> {t('name')} <表单控件> <输入{...字段} /> <表单消息/> )} /> <表单域控制={form.control} 姓名=“电子邮件” 渲染={({字段})=>( <表单项> {t('email')} <表单控件> <输入类型=“电子邮件”{...字段} /> <表单消息/> )} /> <表单域控制={form.control} 名称=“消息” 渲染={({字段})=>( <表单项> {t('message')} <表单控件>

</表单控件>
                  <表单消息/>
                </表单项>
              )}
            />
            
            <按钮类型=“提交”禁用= {form.formState.isSubmitting}>
              {form.formState.isSubmitting ? t('提交') : t('提交')}
            </按钮>
          </形式>
        </表格>
      ）；
    }

## 服务器动作集成
    
    
    // lib/actions.ts
    '使用服务器'；
    
    从 'zod' 导入 { z }；
    从 '@/lib/validations' 导入 { contactFormSchema }；
    
    导出类型 ActionResult = 
      | { 成功：真 }
      | { 成功：假；错误：记录<字符串，字符串[]> }；
    
    导出异步函数submitContactForm(
      表单数据：表单数据
    ): Promise<ActionResult> {
      常量原始数据 = {
        名称：formData.get('名称'),
        电子邮件：formData.get('电子邮件'),
        电话：formData.get('电话'),
        消息：formData.get('消息'),
      };
    
      const 结果 = contactFormSchema.safeParse(rawData);
    
      如果（！结果。成功）{
        返回{
          成功：假，
          错误： result.error.flatten().fieldErrors as Record<string, string[]>,
        };
      }
    
      // 处理有效数据
      const { 姓名、电子邮件、消息 } = 结果.data;
      
      // 发送电子邮件、保存到数据库等
      
      返回 { 成功：真 };
    }

## 带有服务器操作的表单
    
    
    '使用客户端'；
    
    从'react'导入{useActionState}；
    从'@/lib/actions'导入{submitContactForm，输入ActionResult}；
    
    const initialState: ActionResult = { 成功: false, 错误: {} };
    
    导出函数 ContactFormWithAction() {
      const [状态，formAction，isPending] = useActionState(
        提交联系表格，
        初始状态
      ）；
    
      返回（
        <表单操作={formAction}>
          <div>
            <输入名称=“名称”必需/>
            {state.success === false && state.errors.name && (
              <p className =“text-破坏性text-sm”> {state.errors.name [0]} </ p>
            )}
          </div>
          
          <按钮类型=“提交”禁用= {isPending}>
            {正在等待？ '正在提交...' : '提交'}
          </按钮>
          
          {状态.成功&&(
            <p className="text-green-600">消息发送成功！</p>
          )}
        </形式>
      ）；
    }

## 本地化错误消息
    
    
    // 使用翻译后的消息创建模式
    导出函数 createContactSchema(t: (key: string) => string) {
      返回 z.object({
        名称: z.string().min(2, t('errors.nameMin')),
        电子邮件： z.string().email(t('errors.emailInvalid')),
        消息： z.string().min(10, t('errors.messageMin')),
      });
    }
    
    // 组件中的使用
    const t = useTranslations('form');
    const schema = createContactSchema(t);

## 选择/单选字段
    
    
    <表单域
      控制={form.control}
      名称=“经验等级”
      渲染={({字段})=>(
        <表单项>
          <FormLabel>{t('experienceLevel')}</FormLabel>
          <选择 onValueChange={field.onChange} defaultValue={field.value}>
            <表单控件>
              <选择触发器>
                <SelectValue placeholder={t('selectLevel')} />
              </选择触发器>
            </表单控件>
            <选择内容>
              <SelectItem value="beginner">{t('beginner')}</SelectItem>
              <SelectItem value="intermediate">{t('intermediate')}</SelectItem>
              <SelectItem value="advanced">{t('advanced')}</SelectItem>
            </选择内容>
          </选择>
          <表单消息/>
        </表单项>
      )}
    />

## 环境验证
    
    
    // lib/env.ts
    从 'zod' 导入 { z }；
    
    const envSchema = z.object({
      NEXT_PUBLIC_SITE_URL: z.string().url(),
      RESEND_API_KEY：z.string().可选()，
      STRIPE_SECRET_KEY: z.string().startsWith('sk_').可选(),
      STRIPE_WEBHOOK_SECRET：z.string（）.startsWith（'whsec_'）.可选（），
    });
    
    导出 const env = envSchema.parse(process.env);</article></body></html>

Zod React 钩子形式

包含技能