### element-ui el-form 验证中 validator 的 callback 使用方法 在 `element-ui` 的表单验证中，`validator` 是一种自定义校验规则的方式。通过 `validator` 方法，可以对表单字段进行复杂的逻辑校验，并通过回调函数 `callback` 返回校验结果。 以下是一个完整的示例，展示如何使用 `validator` 和 `callback` 来实现自定义校验： ```vue <template> <el-form :model="form" :rules="rules" ref="dataForm"> <el-form-item label="输入框" prop="inputValue"> <el-input v-model="form.inputValue"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { // 定义自定义校验规则 const customValidator = (rule, value, callback) => { if (!value) { return callback(new Error("请输入内容")); // 如果值为空，返回错误信息 } if (value.length < 5) { return callback(new Error("输入内容长度不能小于5")); // 自定义校验逻辑 } callback(); // 校验通过时调用 callback 且不传入参数 }; return { form: { inputValue: "", }, rules: { inputValue: [ { required: true, message: "请输入内容", trigger: "blur" }, { validator: customValidator, trigger: "blur" }, // 使用自定义校验规则 ], }, }; }, methods: { submitForm() { this.$refs.dataForm.validate((valid) => { if (valid) { console.log("表单验证通过"); } else { console.log("表单验证失败"); } }); }, }, }; </script> ``` #### 解析 1. **自定义校验规则**： - 在 `customValidator` 函数中，`rule` 参数表示当前的校验规则对象，`value` 表示需要校验的字段值，`callback` 是用于返回校验结果的回调函数[^2]。 - 如果校验失败，可以通过 `callback(new Error('错误信息'))` 返回错误提示[^3]。 - 如果校验成功，则直接调用 `callback()` 而不传递任何参数[^4]。 2. **触发方式**： - `trigger: 'blur'` 表示在失去焦点时触发校验[^1]。 - 还可以设置为 `change` 或其他事件来触发校验。 3. **回调函数的作用**： - `callback` 是 `validator` 方法的核心部分，用于通知 `element-ui` 校验的结果。 - 如果未调用 `callback` 或调用方式不正确，可能导致校验逻辑无法正常工作。 4. **动态索引支持**： - 在循环渲染表单项时，可以通过 `prop` 动态绑定字段路径，并将索引值传递给 `validator` 方法。 - 示例代码片段如下： ```vue <el-form-item v-for="(item, index) in form.list" :key="index" :prop="'list.' + index + '.value'" :rules="[{ validator: (rule, value, callback) => customValidator(rule, value, callback, index), trigger: 'blur' }]" > <el-input v-model="item.value"></el-input> </el-form-item> ``` #### 注意事项 - 确保在 `validator` 方法中始终调用 `callback`，否则校验逻辑会被阻塞。 - 如果需要传递额外参数（如索引值），可以通过扩展 `validator` 方法的形参列表实现[^2]。 ###