分享一下element区间范围校验
1.表单代码:
<el-form ref="form" :model="form" label-width="80px" :rules="rules">
<el-form-item label="区间名称" prop="confName">
<el-input v-model="form.confName" placeholder="请输入区间名称"></el-input>
</el-form-item>
<el-form-item label="区间范围" :prop="form.minValue?'maxValue':'minValue'">
<div style="display:flex">
<el-input v-model="form.minValue" type="number" placeholder="请输入区间最小值"/>-<el-input v-model="form.maxValue" type="number" placeholder="请输入区间最大值"/>
</div>
</el-form-item>
</el-form>
2.data中的代码
data() {
var validateStart = (rule, value, callback) => {
if(this.form.maxValue){
this.$refs.form.validateField('maxValue');
}
callback();
};
var validateEnd = (rule, value, callback) => {
if(this.form.minValue){
if(Number(this.form.minValue) < Number(value)){
callback();
}else{
callback(new Error('无效的区间范围'));
}
}else{
callback();
}
};
return {
rules:{
confName:[
{ required: true, message: '请输入区间名称', trigger: 'blur' }
],
minValue:[
{ required: true, message: '请输入区间最小值', trigger: 'blur' },
{ validator: validateStart, trigger: 'blur' },
],
maxValue:[
{ required: true, message: '请输入区间最大值', trigger: 'blur' },
{ validator: validateEnd, trigger: 'blur' },
]
},
}
},
复制粘贴即可。好用!!!