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

复制粘贴即可。好用！！！