第 8 章 表单处理与验证

第 8 章 · 表单处理与验证

章节摘要：表单是渲染管线的反向通道——用户在 DOM 里的输入沿着 v-model 逆流回数据层。本章讲各类表单控件的绑定差异、组件化表单的封装模式，以及验证方案从手写到规则库的演进，收尾于提交时序与错误展示的完整实践。

学习目标

阅读完本章，你应当能够：

1. 绑定文本、复选、单选、下拉各类控件，说明 v-model 在每种控件上的展开差异；
2. 封装可复用的表单控件组件并正确处理 v-model 约定；
3. 设计分层验证：字段级即时校验与提交级整体校验；
4. 处理提交时序：防重复提交、错误回填、部分保存。

核心概念速览

v-model 不是"双向数据流"，而是"单向绑定加反向事件"的封装——第 3 章的结论在表单上兑现。

子章节导航

8.1 表单绑定

各类控件的绑定语法、值绑定与修饰符、组件化表单控件的 v-model 封装。

8.2 表单验证

验证的时机分层、错误信息组织、与组件库或验证库的配合、提交时序处理。

子章节之间的逻辑关系

8.1 解决"数据进出控件"，8.2 在数据流上叠加"合法性判断"。先通后验，是表单开发的自然工序，也是排错时的检查顺序。

form 模型 ←v-model→ 控件（8.1）
      ↓
验证规则 attach 到模型字段（8.2）
      ↓
提交：整体校验 → 请求 → 错误回填
​

前置知识与后续延伸

• 前置：第 3 章 v-model 展开式、第 5 章组件 v-model 约定；
• 为后续铺路：表单是"管线反向流动"的代表场景，理解它对理解受控组件、防抖、提交竞态等通用问题都有迁移价值。

表单章节常被老手跳过、被新手轻视，其实它是全册性价比最高的练兵场之一：麻雀虽小，数据双向流动、组件封装、异步竞态、错误处理全部齐活。面试里"手写一个防重复提交的表单"这类题目，考的正是本册第 3、5、8 三章的综合运用；实际项目里用户抱怨最多的交互问题，也常年集中在表单的校验时机与提交反馈上。花一个下午把本章两个小节的代码亲手敲一遍，收获会远超预期。