name: 多步表单模式 description: 专家级框架，用于构建使用向导模式、逐步披露、验证和持久性策略的复杂表单，以提高完成率和用户体验。

多步表单模式

概览

多步表单通过使用向导模式将复杂的数据收集分解成可管理的部分。这种方法减少了认知负荷，通过进度指示器、逐步验证和自动保存功能，提高了20-30%的完成率，并提供了更好的用户体验。使用React Hook Form进行状态管理和Zod进行验证，确保了具有TypeScript支持的强大表单处理。

为什么这很重要

提高完成率：将表单分解为步骤可以提高20-30%的完成率
减少表单放弃：逐步披露减少了放弃率
提高数据质量：逐步验证增加了数据准确性
增强用户体验：进度指示器和自动保存提高了用户体验
提高转化率：更简单的表单完成增加了转化率

核心概念

1. 表单架构

多步表单结构：

表单容器：管理整体表单状态和协调
步骤导航器：控制步骤转换和导航
进度指示器：显示完成状态的视觉反馈
步骤组件：单个表单步骤组件
验证引擎：逐步和全局验证
状态持久性：自动保存和表单状态管理

2. 验证策略

全面的验证方法：

逐步验证：在进行下一步之前验证当前步骤
全局验证：在最终提交时验证所有步骤
异步验证：服务器端验证复杂检查
错误显示：在字段和步骤级别清晰的错误消息
模式验证：使用Zod进行类型安全验证

3. 状态管理

表单状态处理：

表单数据：所有表单字段的集中状态
步骤状态：当前步骤、完成步骤、导航历史
错误状态：按步骤和字段组织的有效错误
提交状态：提交的加载状态
草稿状态：自动保存的草稿数据

4. 进度指示器

视觉进度反馈：

线性进度：显示完成百分比的进度条
步骤指示器：具有状态（活动、完成、待定）的视觉步骤标记
圆形进度：圆形进度指示器，用于整体完成情况
里程碑：突出显示关键成就

5. 持久性策略

数据保存：

本地存储：客户端持久性草稿
会话存储：会话期间的临时持久性
服务器存储：服务器端草稿存储
自动保存：防抖自动保存
手动保存：显式保存按钮

快速开始

设置表单钩子：创建useMultiStepForm钩子进行状态管理
定义模式：为每个步骤创建Zod模式
构建步骤：创建单个步骤组件
添加进度：实现进度指示器
实施验证：添加逐步和全局验证
添加持久性：实现自动保存功能
处理导航：用验证实现步骤导航
测试可访问性：验证键盘导航和屏幕阅读器支持

// useMultiStepForm 钩子
'use client'

import { useState, useCallback } from 'react'

interface UseMultiStepFormOptions<T> {
  initialData: T
  steps: string[]
  onSubmit: (data: T) => Promise<void>
  validate?: (step: number, data: T) => Promise<ValidationErrors>
  onStepChange?: (step: number) => void
}

interface ValidationErrors {
  [key: string]: string
}

export function useMultiStepForm<T extends Record<string, any>>(
  options: UseMultiStepFormOptions<T>
) {
  const [currentStep, setCurrentStep] = useState(0)
  const [formData, setFormData] = useState<T>(options.initialData)
  const [errors, setErrors] = useState<ValidationErrors>({})
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set())

  const totalSteps = options.steps.length

  const updateFormData = useCallback((updates: Partial<T>) => {
    setFormData((prev) => ({ ...prev, ...updates }))
  }, [])

  const validateCurrentStep = useCallback(async (): Promise<boolean> => {
    if (!options.validate) return true

    const stepErrors = await options.validate(currentStep, formData)
    setErrors(stepErrors)

    return Object.keys(stepErrors).length === 0
  }, [currentStep, formData, options])

  const goToStep = useCallback(
    async (step: number) => {
      if (step < 0 || step >= totalSteps) return

      // Validate current step before moving forward
      if (step > currentStep) {
        const isValid = await validateCurrentStep()
        if (!isValid) return
      }

      setCurrentStep(step)
      options.onStepChange?.(step)

      // Mark previous step as completed
      if (step > currentStep) {
        setCompletedSteps((prev) => new Set([...prev, currentStep]))
      }
    },
    [currentStep, totalSteps, validateCurrentStep, options]
  )

  const nextStep = useCallback(async () => {
    await goToStep(currentStep + 1)
  }, [currentStep, goToStep])

  const previousStep = useCallback(() => {
    goToStep(currentStep - 1)
  }, [currentStep, goToStep])

  const handleSubmit = useCallback(async () => {
    // Validate all steps
    const isValid = await validateCurrentStep()
    if (!isValid) return

    setIsSubmitting(true)

    try {
      await options.onSubmit(formData)
    } catch (error) {
      console.error('Form submission failed:', error)
      throw error
    } finally {
      setIsSubmitting(false)
    }
  }, [formData, validateCurrentStep, options])

  const resetForm = useCallback(() => {
    setCurrentStep(0)
    setFormData(options.initialData)
    setErrors({})
    setCompletedSteps(new Set())
  }, [options.initialData])

  return {
    currentStep,
    totalSteps,
    formData,
    errors,
    isSubmitting,
    completedSteps,
    updateFormData,
    nextStep,
    previousStep,
    goToStep,
    handleSubmit,
    resetForm,
    isFirstStep: currentStep === 0,
    isLastStep: currentStep === totalSteps - 1,
    progress: ((currentStep + 1) / totalSteps) * 100,
  }
}

生产清单

[ ] 实现表单状态管理钩子
[ ] 为每个步骤定义验证模式
[ ] 实施并可见进度指示器
[ ] 正确工作逐步验证
[ ] 最终提交全局验证
[ ] 实现自动保存功能
[ ] 表单持久性（localStorage/server storage）
[ ] 用验证实现步骤间导航
[ ] 加载状态异步操作
[ ] 在字段和步骤级别显示错误
[ ] 键盘导航工作
[ ] 验证屏幕阅读器支持
[ ] 移动响应性测试
[ ] 所有浏览器上测试表单
[ ] 性能优化（懒加载，防抖）

反模式

数据丢失：不实现持久性导致刷新时数据丢失
导航混乱：不清晰的进度指示器让用户沮丧
验证时机：错误时间验证导致不良用户体验
性能问题：不优化重绘导致界面迟钝
可访问性问题：缺少键盘导航和屏幕阅读器支持
用户体验差：步骤太长或复杂让用户不知所措
无返回导航：阻止用户返回会造成挫败感
错误消息差：不清晰的错误消息无助于用户解决问题
跳过验证：不正确验证允许无效数据
复杂状态：过于复杂的状态管理使维护变得困难

集成点

React Hook Form：表单状态管理和验证
Zod：模式验证和类型安全
React：核心React组件和钩子
TypeScript：类型安全和接口
Lodash：实用函数（防抖，节流）
form-handling 一般表单模式
react-best-practices React模式
state-management 状态管理选项
accessibility 可访问性指南

进一步阅读

React Hook Form Documentation - 表单管理库
Zod Documentation - TypeScript-first模式验证
Multi-Step Form UX Best Practices - UX研究
Form Validation Patterns - 验证模式
Accessibility for Forms - W3C可访问性教程
Progressive Disclosure - UX原则