TL;DR: 多步表单（向导）将冗长表单拆分为易消化的步骤。TanStack Form 的字段级验证、计算字段和表单状态让这一模式变得自然。本文涵盖带验证守卫的步骤导航、逐级部分提交、跨步骤状态持久化，以及响应字段完成状态的进度指示器。
引言
冗长表单会损害转化率。包含 20 个字段的结账流程，弃单率可达 60%。解决方案：将其拆分为 4-5 个步骤，并配以进度指示器。但多步表单也引入了复杂性——逐级验证、返回导航时的状态持久化，以及部分服务端提交。
TanStack Form 粒度化的字段 API 让这一切变得可控。每个步骤独立验证，字段值响应式持久化，只有在最后一步才提交全部数据。
使用 TanStack Form 构建向导状态
如需 TanStack Form API 的完整概述，请参阅 TanStack Form 完全指南。向导模式建立在其核心表单状态和字段级验证之上：
import { useForm } from '@tanstack/react-form'
import { z } from 'zod'
const wizardSchema = z.object({
// Step 1: Account
email: z.string().email(),
password: z.string().min(8),
// Step 2: Profile
fullName: z.string().min(2),
companyName: z.string().min(1),
// Step 3: Preferences
role: z.enum(['developer', 'manager', 'founder']),
teamSize: z.enum(['1', '2-10', '11-50', '50+']),
})
function OnboardingWizard() {
const [step, setStep] = useState(1)
const form = useForm({
defaultValues: { email: '', password: '', fullName: '', companyName: '', role: 'developer', teamSize: '1' },
validators: { onSubmit: wizardSchema },
})
步骤验证
const canProceed = useMemo(() => {
if (step === 1) return form.state.values.email && form.state.values.password.length >= 8
if (step === 2) return form.state.values.fullName && form.state.values.companyName
return true
}, [step, form.state.values])
return (
<div>
<ProgressBar current={step} total={3} />
{step === 1 && <AccountStep form={form} />}
{step === 2 && <ProfileStep form={form} />}
{step === 3 && <PreferencesStep form={form} />}
<div className="flex justify-between mt-6">
{step > 1 && <button onClick={() => setStep(step - 1)}>Back</button>}
{step < 3
? <button disabled={!canProceed} onClick={() => setStep(step + 1)}>Next</button>
: <form.Subscribe selector={(state) => state.isSubmitting}>
{(isSubmitting) => (
<button disabled={isSubmitting} onClick={() => form.handleSubmit()}>
{isSubmitting ? 'Submitting...' : 'Complete Setup'}
</button>
)}
</form.Subscribe>
}
</div>
</div>
)
}
向导模式决策指南
选择合适的表单模式取决于具体用例。如需深入了解表单设计 UX 模式，请参阅我们的专项指南。
| 模式 | 适用场景 | UX 收益 |
|---|---|---|
| 单步长表单 | 字段 < 10，熟悉的数据 | 完成快速 |
| 多步向导 | 字段 10-30，不熟悉的数据 | 降低认知负担 |
| 条件分支 | 用户画像影响字段集 | 提升相关性 |
| 逐级自动保存 | 关键数据、长会话场景 | 数据零丢失 |
| 并排预览 | 配置密集型场景 | 即时反馈 |
结语
TanStack Form 的逐字段验证与响应式状态机制，使多步向导的实现变得简洁明了。该模式能有效降低复杂入职流程、结账流程和问卷流程的表单弃填率。如需完整的入职策略，请参阅 SaaS 客户入职最佳实践 和 注册流程优化。