📖 实现代码

1. 定义步骤

const STEPS = [
  { id: 1, title: '账号信息',
    fields: ['username', 'email', 'password'] },
  { id: 2, title: '个人资料',
    fields: ['firstName', 'lastName', 'birthDate'] },
  { id: 3, title: '联系方式',
    fields: ['phone', 'address', 'city'] }
];

2. 验证当前步骤

async function validateCurrentStep() {
  const step = STEPS[currentStep - 1];

  // 验证当前步骤的所有字段
  const errors = await form.validateFields(step.fields);

  if (Object.keys(errors).length > 0) {
    // 标记字段为已触摸，显示错误
    step.fields.forEach(field => {
      form.setFieldTouched(field, true);
    });
    return false;
  }

  return true;
}

3. 导航控制

async function nextStep() {
  const isValid = await validateCurrentStep();
  if (isValid && currentStep < STEPS.length) {
    currentStep++;
  }
}

function prevStep() {
  if (currentStep > 1) {
    currentStep--;
  }
}

✨ 功能亮点

分步验证：使用 validateFields() 只验证当前步骤
进度跟踪：实时显示完成进度
错误提示：步骤指示器显示错误状态
灵活导航：可跳转到已完成的步骤
最终确认：提交前预览所有数据

🎯 适用场景

用户注册（账号→资料→确认）
订单结算（购物车→配送→支付）
问卷调查（多页问题）
向导式配置（步骤引导）
复杂表单拆分

💡 使用提示

每一步只验证必需字段，提升用户体验
允许回退修改，但前进需验证
在最后一步展示汇总信息
保存进度，防止意外退出
步骤不宜过多（3-5步为宜）

多步表单示例

账号信息

📖 实现代码

1. 定义步骤

2. 验证当前步骤

3. 导航控制

✨ 功能亮点

🎯 适用场景

💡 使用提示