--- id: "form" title: "表单布局与整组校验" category: "输入组件" document_type: "component-specification" spec_status: "local-current-draft" element_ui: "2.15.6" vue: "2.6.14" page: "../index.html#spec-form" source_data: "../component-data.json" official_components: ["form", "form-item"] template_components: [] scenario_count: 9 verification: "scenario-checklist-not-full-test-pass" --- # 表单布局与整组校验 专题 `form` · 输入组件 · Element UI 2.15.6 ## 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`form`、`form-item`。 ## 通用基线 - 组件库：Element UI **2.15.6**；运行样例 Vue **2.6.14**。 - 系统中文字体：macOS 优先苹方，Windows 通常微软雅黑；工程顺序固定为 `"PingFang SC", "Microsoft YaHei", sans-serif`。不要求安装或加载网络字体，兼容回退不是另一套可选样式。 - 后续仅采用经验证且固定版本的兼容 Element UI 2.x；Element Plus 属于独立迁移路线。 - 正文、数据值、输入及已选值：`14px / 400 / 21px`，`#303133`。 - 表头及组件分组标题：`14px / 600 / 21px`；弹窗标题：`16px / 600 / 24px`，均使用 `#303133`。 - 辅助说明：`12px / 400 / 18px`，`#595959`；错误、链接、状态、禁用与占位按各自语义处理。 - 适用组件的默认尺寸为 `small / 32px`；不得将这一高度机械应用于表格、文本域、浮层等全部组件。 - 规范正文与场景说明使用 `14px / 400 / 24px`、`#303133`，不降成灰蓝小字。 - 筛选文本输入占位统一“请输入”；未选择下拉统一“请选择”；默认全部的下拉显示“全部”。字段标签保留业务含义；日期保留开始/结束语义。 - 次级文字操作（查看更多、编辑、详情、数据中心、更多）：`12px / 400 / 18px`，`#3377BB`；保留点击热区。 - 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。 ## 本页用法与分类 默认用法：多字段填写默认使用一个表单容器；统一标签列、字段prop和整组保存校验。简单短表单连续排列，确有内容分组时才加分组标题。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 容器与字段（组合关系） | 表单管理model、规则与提交，表单项管理单个字段标签和错误。 | 本例使用真实Form/FormItem；输入错误细节转到输入校验专题，不另造第二份规则。 | | 标签与内容列（布局） | 同组标签对齐，输入填满内容列。 | 本例标签80px、内容最多400px，窄容器标签置顶；实际业务的已确认标签列继续沿用。 | | 校验时机（流程） | 失焦/变更检查单项，保存检查整组。 | 错误由真实规则产生；初始空值不直接报错，整组失败定位首错。 | | 保存与重置（动作） | 保存通过后才采纳字段，重置恢复初始化值。 | 本例仅保留本页副本；正式请求和异步初始快照需按所在页面接入。 | 使用边界：表单分组、输入宽度、字段错误和提交结果不是四套可选样式；不要把本地校验通过说成后台保存成功。 ## 组件规则 - **FORM-R01**：表单将字段、标签、规则和提交动作组织成一个完整填写单元。使用Element UI 2.15.6的el-form与el-form-item；一个字段一个稳定prop，与model、校验规则和错误位置对应。单字段视觉、错误颜色和输入宽度分别引用输入框与输入校验专题，不重复维护另一套颜色或尺寸。 - **FORM-R02**：必填标记统一放在字段名称前：使用错误红星号，与文字间距4px；只显示一次，不放在输入框后。星号对辅助技术隐藏，控件按真实规则设置aria-required；复选组合只表达整组至少选一项，不把组内每项标成必填。 - **FORM-R03**：默认采用单列左对齐标签。相同表单组使用同一标签列宽，按最长标签统一设置；本例沿用会员表单80px标签列、最大400px内容列。标签列的8px右内距计入80px，不额外再加一条间距。实际容器不足480px时标签放上方，内容列最多占满容器且不超过400px。 - **FORM-R04**：标签始终可见，必填星号与aria-required一致。每个控件有唯一id并关联标签；就近说明和错误通过aria-describedby关联。首屏空表单不自动满屏报错；本例账号失焦检查必填和4–11位英文字母或数字；重置后尚未编辑的空账号不会仅因程序聚焦后失焦再次报错。商户改变时检查必选。示例限制不替代业务服务端合同。 - **FORM-R05**：保存时调用表单整组validate，全部通过后才生成本页保存结果；存在错误时逐字段显示文字，将焦点移到第一个错误字段并让它进入可见区域。一次提交只定位首错，不把每个错误轮流弹窗；改正后清除对应字段错误，其他未纠正错误保留。 - **FORM-R06**：重置调用resetFields，恢复该表单初始化值并清除校验、反馈与本地保存结果；本例初始值为空。重置后未编辑的空账号失焦不报错；真实输入后恢复失焦校验，提交始终检查全部必填项，已有错误继续随纠正更新。重置不等于取消关闭，也不等于恢复服务器最新值。后端数据异步到达的编辑表单应先建立明确初始快照，不能盲用首次挂载的空值。 - **FORM-R07**：保存和重置职责分开。表单通过后本例只记录内存中的示例副本，操作区显示“保存成功”，保存范围在交付文档中说明；不创建会员、不请求后台、不宣称跨页保存。正式接入需防重复提交、检查真实响应、保留失败草稿，并按服务端字段名映射错误。 - **FORM-R08**：分组仅用于真实相关字段，组内字段纵向间距16px、组间24px；说明和错误在所属内容列内换行，分组标题14px/600、正文14px/400。分组不意味着新增业务步骤；简单短表单可直接连续排列，不能给现有新增会员页强加本例分组。 - **FORM-R09**：按回车提交仅在宿主明确允许时开启，本例表单原生提交统一走同一个整组校验方法；中文输入法组合阶段按回车不另开旁路提交。文本域回车保留换行。长表单由所属弹窗或页面滚动，不在每个字段外围再套滚动条。 - **FORM-R10**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **FORM-R11**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **FORM-R12**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **FORM-R13**：表单与弹窗的主要操作区统一右侧对齐，次要动作在左、主动作在右，按钮间距10px。常规文案使用“确认、取消、保存、删除、重置”等两字动作；取消不保存并退出，重置恢复初始值，两者不能互相替换。涉及特殊业务时以准确表达为先。 - **FORM-R14**：填写区只保留影响操作的格式、限制、必填或错误说明；不逐字段重复“本地演示、不代表正式数据”等提示。原型数据保存范围、接口与未接入能力集中记录在规范文档，不写进业务操作文案。 - **FORM-R15**：必填和错误语义必须落到实际控件：标签与错误提示关联稳定ID；组合选择的必填属于整组，不能让每个复选项、筛选关键词或上传按钮都变成必填。切换状态后同步更新，保留明确选填的字段。 ## 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **FORM-S01**：当前示例包含会员账号、商户、申请信息三个字段，分为“基本信息”和“补充说明”两组；账号与商户必填，申请信息选填。核对独立标签、必填标记、可访问名称和就近说明一致。 - [ ] **FORM-S02**：当前示例：初始空表单不报错；账号失焦报必填或格式错误；商户清空后显示必选提示。 - [ ] **FORM-S03**：当前示例：整组提交失败后聚焦第一处错误；修正第一处不清空另一处；再次提交定位剩余错误。 - [ ] **FORM-S04**：当前示例：有效内容仅保存为本页副本，结果文案真实；修改字段撤去旧成功状态，刷新不保留。 - [ ] **FORM-S05**：当前示例：重置恢复初始空值，移除全部错误和保存结果，焦点回账号；未编辑就离开并返回时不重新制造空值错误，真实输入后失焦和整组提交仍校验；不触发新增业务记录。 - [ ] **FORM-S06**：布局：标签列80px含8px右内距，内容列最大400px；容器小于480px标签置顶，正文14px/400不缩小。 - [ ] **FORM-S07**：接入验收：异步初始数据、跨字段和服务端校验、隐藏字段是否参与提交、重复提交、失败草稿、取消离开及返回焦点；未接入接口的能力不得写成本例已完成。 - [ ] **FORM-S08**：核对必填星号在字段名前、间距4px且无重复；非必填字段无星号。错误短提示在对应内容列下方，与输入框左边界对齐；标签、必填和错误语义与真实字段规则一致。 - [ ] **FORM-S09**：操作区右侧对齐，重置在左、保存在右；常规按钮为两字动作。普通选择字段下不附加原型免责声明，错误时才出现有效错误说明。 ### 专题验收重点 空表单保存应同时提示账号和商户错误并聚焦账号；只修正账号后再次保存应聚焦商户；账号失焦与选择变更即时检查，非法账号不成功；全部有效后显示本地副本；修改后撤去旧成功反馈，重置恢复初始值并清除错误；未编辑就离开并返回时保持无错，真实输入后清空再失焦或直接保存仍须报必填。缩窄容器检查标签置顶、400px内容列上限、长错误换行和焦点可见。 ## 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ## 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ## 来源与关联 - 来源线索：Element UI官方Form文档：https://github.com/ElemeFE/element/blob/dev/examples/docs/zh-CN/form.md；本地vendor/element-ui-2.15.6.js的Form/FormItem、validate、resetFields；official-form-layout.js/css。本项目既有账号表单仅作为字段与布局参照，不改其业务合同。。 - [打开本专题页面](../index.html#spec-form) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`form`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `official-form-pattern` 的实现：[official-form-layout.js](../official-form-layout.js)。 ## 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 标签与有效内容 | 标签、输入值与正文使用正文深灰；分组标题同色600字重，必要说明辅助深灰。 | | 聚焦与单项错误 | 输入焦点和错误按输入框/输入校验专题；整组提交失败不把全部正常字段染红。 | | 保存与失败反馈 | 主保存按钮沿用按钮状态；字段失败显示对应红色短提示，本地保存通过只更新明确结果文字，不将全部表单染绿。 | | 重置 | 重置使用普通按钮；执行后恢复初始字段与原有颜色，不以危险红表示正常恢复。 | 表单是字段与流程的组合，没有独立的选中底或加载皮肤；状态分配到真实字段、按钮和反馈。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ## 业务落地场景 - [新增账号 · 新增会员 · 整组校验](../../showcase/index.html?example=member-form#create-account) · [场景文档](../../showcase/docs/create-account.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md)