一、实现效果:
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 || '请求失败');
});
});
}
}