使用Vue2与elementUI做新增与修改的表单验证时,除了基础的必填校验,还需要调用后台接口查询输入的值是否存在,如果存在就在输入框下面做出提示,并使该字段校验不通过。
<el-form
ref="formData"
:model="form"
:rules="rules"
label-width="80px"
label-position="top"
>
<el-form-item label="是否存在" prop="test">
<el-input
v-model="form.test"
/>
</el-form-item>
</el-form>
data() {
const validTest = async (rule, value, callback) => {
//先校验输入的内容格式是否满足要求
if (value !== undefined && value !== '' && !validNumABC(value)) {
callback(new Error(window.vm.$i18n.t('validate.number_capital')));
} else {
let param = {
value: this.form.test,
};
await checkUnique(param).then((response) => {
if (response.code === 200) {
if (response.data === '1') {
return callback(
new Error(
'该值已存在'
)
);
}
}
});
}
};
return {
form:{test:''},
rules: {
test: [
{
required: true,
message: '必须输入',
trigger: 'blur',
},
{ validator: validTest , trigger: 'blur' },
],
}