elementui中rules的validator 用法
在 Element UI 中，rules 的 validator 是用于自定义校验规则的核心属性，适用于复杂或非标准验证逻辑。以下是完整用法说明：
✅ 基本结构
rules: {fieldName: [{validator: (rule, value, callback) => {// rule：当前规则配置// value：当前字段值// callback：验证完成后的回调if (/* 验证失败 */) {callback(new Error('错误提示信息'));} else {callback(); // 验证通过}},trigger: 'blur' // 触发方式}]
}
✅ 示例：用户名长度必须大于3
data() {const validateUser = (rule, value, callback) => {if (!value || value.length <= 3) {callback(new Error('用户名长度必须大于3'));} else {callback();}};return {form: { user: '' },rules: {user: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ validator: validateUser, trigger: 'blur' }]}};
}
<el-form :model="form" :rules="rules" ref="form"><el-form-item label="用户名" prop="user"><el-input v-model="form.user" /></el-form-item>
</el-form>
✅ 表单提交时触发验证
this.$refs.form.validate(valid => {if (valid) {// 验证通过} else {// 验证失败}
});
✅ 高级用法：动态传参（如表格行）
如果你需要在校验函数中访问外部变量（如表格行数据），可以通过函数返回规则的方式实现：
validatorQty(row) {return [{validator: (rule, value, callback) => {if (!value && !row.otherField) {callback(new Error('请至少选择一项'));} else {callback();}},trigger: 'blur'}];
}
然后在模板中：
<el-form-item :rules="validatorQty(row)" prop="someField"><el-input v-model="row.someField" />
</el-form-item>
✅ 注意事项
callback()必须调用，否则验证不会结束；validator支持异步校验（如接口校验），只需在异步完成后调用callback()；- 多个规则会按顺序执行，直到遇到第一个失败。
如需更复杂规则（如正则、联动校验、异步接口验证），都可以在 validator 中实现。