新規および変更されたフォームの検証に 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' },
],
}