### 定义自定义校验规则 在 `el-form` 中实现自定义校验规则，通常是在 Vue 的 methods 或者 rules 配置项内完成。对于较为复杂的逻辑，推荐将校验函数放在 methods 内部以便于维护和重用。 #### 方法一：直接在 Rules 中定义匿名函数 可以直接在 form 表单的 rules 属性里为特定字段设置校验规则，这种方式适合简单的场景： ```javascript rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ] } ``` 这种方法适用于不需要复用或传递参数的情况[^1]。 #### 方法二：通过 Methods 实现更灵活的校验逻辑 当需要执行更加复杂或者依赖外部状态变化的校验时，则可以在组件的 methods 中创建独立的方法来处理这些业务逻辑，并将其作为回调传入到 rules 当中: ```vue <template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <!-- ... --> </el-form> </template> <script> export default { data() { var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); } }; return { ruleForm: { pass: '', checkPass: '' }, rules: { pass: [{ validator: validatePass, trigger: 'blur' }] } }; } }; </script> ``` 上述例子展示了如何利用 methods 来构建一个用于确认两次输入一致性的验证器[^2]。 为了确保表单项能够被正确识别并应用相应的校验规则，在 `<el-form-item>` 上应该绑定对应的 `prop` 属性，该属性应指向 model 对象里的相应键名[^3]: ```html <el-form-item label="Password" prop="pass"> <el-input v-model="ruleForm.pass"></el-input> </el-form-item> ``` 这样做的好处是可以让框架自动关联起模型数据与视图层之间的关系，从而简化开发流程并提高代码可读性。 最后值得注意的是，如果遇到动态生成子表单或其他特殊情况下的嵌套结构，可能还需要额外考虑样式调整等问题以适应布局需求[^4]。