The el-input input box requires verification that the value of the next input box is greater than the value of the previous input box

Project scenario:

The following validations are required:

---

Problem Description

A form is required, which contains six consecutive intervals, closed on the left and open on the right, so the value entered in the next input box must be greater than the value entered in the previous input box

This part is placed at the same level as the return in data

 var interval1_valid = (rule, value, callback) => {
    if(this.formInterval.interval1){
     if(Number(this.formInterval.min) < Number(value)){
       callback();
     }else{
       callback(new Error('须大于0'));
     }
   }else{
     callback();
   }
  }
 var interval2_valid = (rule, value, callback) => {
   if(this.formInterval.interval1){
     if(Number(this.formInterval.interval1) < Number(value)){
       callback();
     }else{
       callback(new Error('须大于上一个输入框数值'));
     }
   }else{
     callback();
   }
 }
 var interval3_valid = (rule, value, callback) => {
   if(this.formInterval.interval2){
     if(Number(this.formInterval.interval2) < Number(value)){
       callback();
     }else{
       callback(new Error('须大于上一个输入框数值'));
     }
   }else{
     callback();
   }
 }
//......后面以此类推

Putting this part in the return is the normal way of writing rules

 rules: {
        interval1: [
          { required: true, message: '请输入', trigger: 'change' },
          { validator: interval1_valid, trigger: 'change' },
        ],
        interval2: [
          { required: true, message: '请输入', trigger: 'change' },
          { validator: interval2_valid, trigger: 'change' },
        ],
        interval3: [
          { required: true, message: '请输入', trigger: 'change' },
          { validator: interval3_valid, trigger: 'change' },
        ],
       //......
      },

The name corresponding to the validator is consistent with the name of the above var

---

solution: