多步骤向导表单分步校验需按需验证、不干扰后续步骤、错误聚焦当前页；只校验当前步骤字段，聚合validateField回调结果统一判断，结合completedSteps管理已通过步骤，并提供局部化视觉反馈。
多步骤向导表单的分步校验，核心是“按需验证、不干扰后续步骤、错误聚焦当前页”。不能等最后一步才校验全部，也不能让上一步的错误影响下一步的填写。Element Plus 或 Element UI 都支持这种场景，关键在于合理组合 validateField 和状态控制。
只校验当前步骤的字段
每一步对应一组字段（如 step1: name、phone；step2: email、address），校验时只传入当前步骤涉及的 prop 名数组，避免触发无关字段的规则：
- 用
ref拿到表单实例，例如formRef - 定义每步的字段名数组，如
currentStepFields = ['name', 'phone'] - 调用
formRef.value.validateField(currentStepFields, callback) - 注意：Element UI 的
validateField对数组参数会多次触发回调，需手动聚合结果（见下一点）
聚合多字段校验结果再统一判断
因为 validateField(['a','b','c']) 会触发三次回调，直接在回调里跳转或提示会导致逻辑错乱。推荐做法是用一个临时对象收集各字段状态：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 声明
const fieldErrors = {}存储每个字段的错误信息 - 回调中记录：
fieldErrors[field] = errorMessage - 用计数器或
Set判断是否所有字段都已返回结果 - 全部返回后，检查
Object.values(fieldErrors).every(v => !v)再决定是否进入下一步
配合步骤状态管理，避免重复校验
用户可能反复切换步骤，但不应重复触发校验逻辑。建议结合步骤索引和已通过标记：
立即学习“前端免费学习笔记（深入）”；
- 维护
completedSteps = new Set([0])，初始仅第 0 步视为完成（如欢迎页） - 点击“下一步”时，先校验当前步；校验通过则
completedSteps.add(currentIndex) - 点击“上一步”不校验，直接跳转；点击“下一步”必须校验当前步
- 若用户跳回已通过的步骤修改内容，再次点击“下一步”仍需重新校验该步
视觉反馈要清晰且局部化
错误提示不能堆在页面顶部，而应绑定到对应表单项，并高亮当前步骤区域：
- 每个
<el-form-item prop="xxx"></el-form-item>会自动接收validateField的错误信息并显示 - 给当前步骤容器加
class="step-active"，CSS 中突出边框或背景色 - 禁用“下一步”按钮直到当前步校验通过，避免误操作
- 可选：在步骤条上用图标标记已通过/有错误/未访问（如 ✅ / ❌ / ○）
