在 Vue 2 中，多个 `el-form` 组件确实可以共享同一套验证规则 (`rules`)。为了实现这一功能，可以通过将验证规则定义为独立的对象并传递给各个表单实例来达到资源共享的目的。以下是详细的说明和示例代码。 ### 实现方式 #### 定义全局验证规则对象 创建一个单独的 JavaScript 对象存储所有的验证规则，并将其作为 props 或者直接绑定到每个 `el-form` 上。 ```javascript // 定义公共的校验规则 const commonRules = { name: [ { required: true, message: '请输入名称', trigger: 'blur' }, { min: 3, max: 10, message: '长度应在 3 到 10 个字符之间', trigger: 'blur' } ], email: [ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] } ] }; ``` #### 将规则应用于不同的 el-form 表单 通过将这个公共规则对象分配给不同表单的 `rules` 属性，可以让它们共享相同的验证逻辑。 ```html <template> <div> <!-- 第一个表单 --> <el-form :model="form1" :rules="commonRules" ref="form1"> <el-form-item label="姓名" prop="name"> <el-input v-model="form1.name"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="form1.email"></el-input> </el-form-item> </el-form> <!-- 第二个表单 --> <el-form :model="form2" :rules="commonRules" ref="form2"> <el-form-item label="姓名" prop="name"> <el-input v-model="form2.name"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="form2.email"></el-input> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { // 公共规则 commonRules, // 不同表单的数据模型 form1: { name: '', email: '' }, form2: { name: '', email: '' } }; } }; </script> ``` 在此例子中，两个 `el-form` 使用了同一个 `commonRules` 来管理各自的校验行为[^1]。 #### 自定义校验器支持 如果某些特定场景下需要自定义校验函数，则可以在初始化阶段扩展这些通用规则。例如： ```javascript function validateMin(rule, value, callback) { if (value === '') { return callback(new Error('最小值不能为空')); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error('请输入合法数字')); } else { if (value < 18) { callback(new Error('年龄必须大于等于18岁')); } else { callback(); } } }, 1000); } const customCommonRules = Object.assign({}, commonRules, { age: [{ validator: validateMin, trigger: 'blur' }] }); ``` 之后再替换掉原有的 `commonRules` 即可[^2]。 --- ### 注意事项 - **prop 值唯一性**：尽管多个表单能够复用一套规则集，但每条规则对应的 `prop` 字段名应当保持一致或者重新映射以匹配各自的实际需求[^4]。 - **异步加载问题处理**：当涉及到复杂的业务流程时（如远程接口调用来决定是否通过），记得合理控制回调顺序以及错误提示显示时机[^3]。 ---