在 Vue 2 中，多个 `el-form` 可以共用一组验证规则 (`rules`)。这种设计不仅减少了重复代码，还提高了维护效率。然而，在实际应用中需要注意一些细节问题，特别是当表单中缺失某些由 `rules` 定义的必填字段时的行为。 ### 验证规则共享机制 通过将验证规则定义为一个独立的对象，并将其赋值给多个 `el-form` 的 `rules` 属性，可以实现规则的共享。这种方式不会因为表单数量的变化而受到影响[^1]。 ```javascript const sharedRules = { name: [ { required: true, message: '请输入名称', trigger: 'blur' } ], email: [ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] } ] }; ``` 随后，可以在多个表单组件中复用该规则： ```html <el-form :model="formA" :rules="sharedRules" ref="formA"> <el-form-item label="姓名" prop="name"> <el-input v-model="formA.name"></el-input> </el-form-item> </el-form> <el-form :model="formB" :rules="sharedRules" ref="formB"> <el-form-item label="电子邮件" prop="email"> <el-input v-model="formB.email"></el-input> </el-form-item> </el-form> ``` 在这种情况下，即使两个表单分别只包含了部分字段，仍然可以正常工作，前提是未声明的字段不会触发任何交互操作[^2]。 ### 缺失必填字段的影响 如果某表单缺少了 `rules` 中定义的一个或多个必填字段（即其 `required` 设置为 `true`），则会发生如下情况： 1. **校验失败**：提交表单时会自动检测所有被指定为必需(`required=true`)却未提供对应输入控件的属性，并标记这些项目为无效状态。 这是因为 Element UI 的表单验证逻辑基于每个 `prop` 和它的关联规则逐一执行；即便当前视图层面上可能并未渲染出相应的 HTML 元素，只要存在对该键名的要求就会生效[^3]。 2. **用户体验考量**：由于不可见区域内的潜在错误可能导致用户困惑——他们无法直观理解为何整体验证未能成功完成。因此建议要么调整全局规则使之适应具体上下文中可用数据结构，要么利用条件语句动态生成局部适用版本的 rules[]。 例如下面展示了一种方法来根据实际情况灵活定制各别实例所需的检验标准： ```javascript computed:{ effectiveRules(){ let base=this.sharedRules; if(this.currentScenario==='login'){ delete base['address'];//登录界面不需要地址信息 } return {...base} } } ``` 这样就可以确保只有那些真正存在于界面上的内容才会受到约束检查[^4]。 --- ### 注意事项总结 - 确保所有参与共享的表单都遵循统一命名约定以便于正确映射至预设好的 rule set； - 如果发现因缺乏必要的 input 导致不必要的 error 提醒，则需重新审视业务需求并相应修改相关联的 validation criteria 设定； - 动态构建适配不同场景下的个性化 yet consistent verification schemes 是一种推荐实践方向。