element-ui中el-input输入时自定义校验,并且调后端接口查重

2023-11-07

一、实现效果:
1.只能属于正整数
2.只能属于7位或者9位
3.输入时实时校验
4.查重,不能输入列表存在的,除自己之外

<el-form-item :label="$t('receivingTankerCode') + ':'" prop="receivingTankerCode">
	<el-input v-model="ruleForm.receivingTankerCode" maxlength="9" clearable size="small" @input="value => (ruleForm.receivingTankerCode = Tool.calcNumEvery(value))" :placeholder="$t('placehEnter')"></el-input>
</el-form-item>
//在tool文件,引入正整数函数
// 正整数
export const Tool = {
	calcNumEvery(num) {
		num = num.replace(/[^0-9.]/g, ''); // 清除“数字”以外的字符
		return num;
	}
}
//data自定义校验
 data() {
    //自定义校验方法
	const validateReceivingCode = (rule, value, callback) => {
		if (String(value).length !== 7 && String(value).length !== 9) {
			callback(new Error('只允许输入7位或9位数字'));
		} else {
			const params = {
				receivingTankerCode: value
			};
			//查重
			this.checkTanker(params).then(res => {
				console.log(res, '是否重复');
				if (res.records && res.records.length === 0) {
					callback();
				} else {
				   //不能输入列表已存在的,除了自身之外
					if (res.records.some(item => item.receivingTankerCode === value && item.id !== this.Hid)) {
						callback(new Error('船号重复,请重新输入'));
					} else {
						callback();
					}
				}
			});
		}
	};
	return {
		ruleForm: {
			receivingTankerCode: ''
		},
		rules: {
			receivingTankerCode: [
			   //需要添加change时间,实时校验是否为空值
				{ required: true, message: '输入内容不可为空,请输入', trigger: ['blur', 'change'] },
				{
					validator: validateReceivingCode,
					trigger: 'blur' //不能添加change事件,不然数据变化时就会调接口
				}
			]
		}
	};
},
method:{
   //查重函数
	checkTanker(params) {
		return new Promise(resolve => {
			// 关键
			API.getReceivingTankerList(params)
				.then(res => {
					if (res.status) {
						resolve(res.data); // 关键
					} else {
						this.$message.error(res.msg || '请求失败');
					}
				})
				.catch(err => {
					this.$message.error(err.msg || '请求失败');
				});
		});
	}
}	
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

element-ui中el-input输入时自定义校验,并且调后端接口查重 的相关文章