【VUE】表单验证调接口校验是否已存在

使用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' },
				],
}

猜你喜欢

转载自blog.csdn.net/liusuihong919520/article/details/130988750
今日推荐