复杂表单实战：我在项目里踩过的 Vue 坑

wuwenzen@outlook.com (wuwj) — Tue, 18 Jun 2019 00:00:00 +0000

表单是前端最常见、也最容易写成一坨的东西。简单表单随便放几个 v-model 都能跑，一旦字段多起来、存在动态联动、跨步校验，代码就开始失控。

这篇文章基于我做过的一个"几十个字段 + 多步 + 条件显示"的表单项目，总结一些在 Vue 里踩过的坑和解决方案。

需求背景：一个略显「超标」的表单

当时的表单大概长这样：

3 个步骤：基础信息 → 业务信息 → 确认提交
每步有 8～15 个字段
部分字段需要「根据上一步选择动态显示或隐藏」
有跨字段校验（比如：结束日期 ≥ 开始日期）
需要支持「草稿保存」+「再次打开自动回填」

如果一股脑全写在一个组件里，大概会出现：

data 里一个巨大的 form = { ... }。
各种 watch 做联动逻辑。
methods 里各种 validateXXX，互相依赖。
维护成本爆炸。

核心思路：拆数据结构 + 拆 UI + 拆校验

1. 数据结构要先定清楚

我一般会在一开始，就写出一个完整的 formModel：

const defaultForm = () => ({
  basic: {
    name: '',
    idNo: '',
    phone: '',
  },
  business: {
    type: '',
    amount: null,
    startDate: '',
    endDate: '',
  },
  extra: {
    agree: false,
    comment: '',
  },
});

在组件里：

表单校验 on Saiga

复杂表单实战：我在项目里踩过的 Vue 坑

需求背景：一个略显「超标」的表单

核心思路：拆数据结构 + 拆 UI + 拆校验

1. 数据结构要先定清楚