el-form-item 上直接定义 rules 为何不触发校验？

Question

在 Element Plus 中，直接在 `el-form-item` 上通过 `rules` 属性定义校验规则（如 ``）**不会触发校验**，根本原因是：`el-form-item` 本身不持有表单数据与校验逻辑，它仅负责布局与错误提示展示；真正的校验必须由 `el-form` 统一管理，且依赖 `prop` 属性与 `el-form` 的 `model` 数据双向绑定。若未设置 `prop`（如 `prop="username"`），`el-form` 无法定位对应字段，`validate()` 或失焦校验均失效；同时，`el-form-item` 的 `rules` 属性在官方文档中并不存在（属常见误用），正确方式是将规则统一配置在 `el-form` 的 `rules` 对象中，按 `prop` 键名映射。此外，还需确保 `el-form-item` 内嵌的表单控件（如 `el-input`）已通过 `v-model` 正确绑定到 `model` 的对应字段。忽略任一环节，都将导致规则“静默失效”。

Answer 1

```html

一、现象层：表单校验“看似配置却静默失效”

开发者在 <el-form-item rules="[{ required: true }]"> 中直接声明规则，界面无报错、控制台无警告，但 validate() 返回 true，失焦/提交时零反馈——这是最典型的“幻觉配置”陷阱。Element Plus 官方文档中 el-form-item 的 Props 列表完全不包含 rules 字段，该属性属于非法透传，Vue 会静默忽略，且不会触发任何响应式依赖收集。

二、结构层：组件职责边界与数据流契约

• el-form：校验引擎中枢，持有 model（响应式数据源）、rules（字段级规则映射表）、validate/resetFields 等方法；
• el-form-item：纯展示容器，仅通过 prop 告知父级“我代表哪个字段”，并消费 el-form 注入的 validateState 和 errorMessage；
• 内嵌控件（如 el-input）：必须用 v-model="model.username" 实现双向绑定，否则 el-form 读取不到实时值，校验失去输入依据。

三、机制层：校验触发的三大必要条件（缺一不可）

条件	技术要求	失效表现
① 字段标识对齐	el-form-item 必须设置 prop="username"，且与 rules 对象的 key 严格一致	validate() 跳过该字段，fields 参数为空数组
② 数据绑定闭环	v-model 必须绑定到 model 的同名属性（如 model.username），不可用计算属性或临时变量	校验始终使用初始空值，无法反映用户输入
③ 规则注册位置	rules 必须定义在 el-form 的 :rules="formRules"，格式为 { username: [{ required: true, message: '...' }] }	规则未被 el-form 初始化，this.$refs.form.validate 无字段元信息

四、调试层：五步定位静默失效根因

1. 检查浏览器 Vue Devtools 中 el-form 组件的 props.rules 是否存在且结构正确；
2. 确认 el-form-item 的 prop 值与 rules 的 key 是否完全匹配（含大小写、空格）；
3. 在控制台执行 this.$refs.form.fields，验证返回数组是否包含对应字段对象；
4. 打断点于 el-form 源码 validateField 方法，观察 field 参数是否为 undefined；
5. 移除所有自定义指令/封装组件，用原生 el-input + v-model 最小化复现问题。

五、架构层：为什么 Element Plus 设计为“集中式校验”？

从大型表单工程实践出发：
✅ 支持跨 el-form-item 的联动校验（如“密码”与“确认密码”一致性）；
✅ 允许动态增删字段后统一重置校验状态（resetFields）；
✅ 避免每个 el-form-item 持有独立 validator 实例导致内存泄漏；
✅ 与 Vue 3 的 Composition API 深度协同（useForm 可封装全局校验逻辑）。
这种设计本质是将“校验”视为表单域（Form Domain）的领域行为，而非 UI 组件的展示职责。

六、解决方案层：标准实现模板（含 TypeScript 类型安全）

<template>
  <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const formRef = ref()
const form = ref({ username: '' })

const rules = ref({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
  ]
})
</script>

七、演进层：从 Element Plus 到 Composition API 的范式升级

graph LR A[setup() 中定义 formRef] --> B[useForm
- 封装 validate/reset
- 自动注入 rules] B --> C[useField
- 基于 prop 动态注册字段
- 支持异步规则函数] C --> D[useValidate
- 提供 validateField 单字段校验
- 返回 Promise<boolean>] D --> E[与 Pinia/Vuex 集成
- 校验状态持久化
- 多步骤表单状态同步]

现代项目已普遍采用 useForm 自定义 Hook 替代原生 el-form，将校验逻辑从模板解耦至逻辑层，实现可测试、可复用、可追踪的表单状态管理。

```