elementUI 两个输入框联动校验
第一个输入框值不能大于第二个输入框值
第二个输入框值不能小于第一个输入框值
<el-form-item prop="start" label-width="70px">
<el-input
clearable
type="text"
v-model="thisForm.start"
@clear="$refs.thisForm.validateField('start')"
@input="changeValue('start')"
placeholder="请输入"/>
</el-form-item>
<el-form-item prop="end" label-width="0px">
<el-input
clearable
type="text"
v-model="thisForm.end"
@clear="$refs.thisForm.validateField('end')"
@input="changeValue('end')"
placeholder="请输入"/>
</el-form-item>
rules: {
start: [{ required: true, validator: this.validateRange('start', 'end', true), trigger: 'blur' }],
end: [{ required: true, validator: this.validateRange('end', 'start', false), trigger: 'blur' }]
},
validateRange(params, compare, flag) {
const lowLimit = '下限值'
const upLimit = '上限值'
return (rule, value, callback) => {
if (!value || value === '0') {
return callback(new Error(`请输入大于的0小数`))
} else if (value) {
const paramsValue = +this.thisForm[params]
const compareValue = +this.thisForm[compare]
if (flag) {
if (paramsValue > compareValue) {
this.$refs.thisForm.clearValidate(compare)
return callback(new Error(`${lowLimit}不能大于${upLimit}`))
} else {
this.$refs.thisForm.clearValidate(compare)
if (!Number(this.thisForm[compare])) this.$refs.thisForm.validateField(compare)
}
callback()
} else {
if (paramsValue < compareValue) {
return callback(new Error(`${upLimit}不能小于${lowLimit}`))
} else {
this.$refs.thisForm.clearValidate(compare)
if (!Number(this.thisForm[compare])) this.$refs.thisForm.validateField(compare)
}
callback()
}
callback()
} else {
callback()
}
}
},
elementUI 两个输入框联动校验 第一个输入框值不能大于第二个输入框值 第二个输入框值不能小于第一个输入框值
最新推荐文章于 2024-07-24 15:51:28 发布