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