The El form item contains two inputs. Verify the two inputs

  This is the demand : 

           1. Maximum input 999( Integers )

           2. Can't be empty , Fill in at least one item

           3. The maximum value must be greater than the minimum value

           4. You can select month, year and day , One year according to 365 Day count , January by 30 Day count

<el-form-item
    v-if="ruleForm.goodsWay === 1"
    label=" Shelf life range "
    :error="cuePriceRateError"
>
    <el-col
        :span="6"
        style="padding-left:0"
    >
        <el-form-item
            prop="endTime"
        >
            <el-input
                v-model="ruleForm.startTime"
                style="width:150px"
                type="number"
                onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
                @change="onStartTimeChange"
                @blur="onStartTimeChange"
            >
                <el-select
                    slot="append"
                    v-model="ruleForm.startOpt"
                    style="width:58px"
                    @change="dataOtherRules"
                >
                    <el-option
                        v-for="{value, label} of timeOptionsList"
                        :key="value"
                        :label="label"
                        :value="value"
                    />
                </el-select>
            </el-input>
        </el-form-item>
    </el-col>
    <el-col :span="1">
        ~
    </el-col>
    <el-col :span="6">
        <el-form-item
            prop="endTime"
        >
<!-- onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
 This code is to control the input of non numeric  -->
            <el-input
                v-model="ruleForm.endTime"
                type="number"
                onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
                style="width:150px"
                @change="onEndTimeChange"
                @blur="onEndTimeChange"
            >
                <el-select
                    slot="append"
                    v-model="ruleForm.endOpt"
                    style="width:58px"
                    @change="dataOtherRules"
                >
                    <el-option
                        v-for="{value, label} of timeOptionsList"
                        :key="value"
                        :label="label"
                        :value="value"
                    />
                </el-select>
            </el-input>
        </el-form-item>
    </el-col>
    <el-col :span="11">
        ( January =30 God ,  A year =365 God )
    </el-col>
</el-form-item>

//  It's on it html Two input boxes and two drop-down boxes 

data: {
    return {
         cuePriceRateError: '',
    }
}

//  Method :
cptTime(val) {
    switch (val) {
        case 1: return 365;
        case 2: return 30;
        case 3: return 0;
        default: return 0;
    }
},

onStartTimeChange() {
    this.dataOtherRules();
},
onEndTimeChange() {
    this.dataOtherRules();
},

//  1. First judge whether the two boxes are empty ,  If all are empty 
//  2. It is necessary to judge whether the input of one item and two items is greater than 999
//  3. If you enter both , And none of them is greater than 999,  Judge whether the former item is greater than the latter item 
//  4. Here is just a hint , It doesn't really prevent form submission ,  To prevent judging when submitting this.cuePriceRateError  Whether it is empty is OK 

dataOtherRules() {
    const isEmpty = (val) => (val === undefined) || (val === '');

    let startTime = this.ruleForm.startTime;
    let endTime = this.ruleForm.endTime;
    //  If both items are not entered 
    if (isEmpty(startTime) && isEmpty(endTime)) {
        this.cuePriceRateError = ' Please enter at least one item ';
    } else if ((!isEmpty(startTime) && !isEmpty(endTime))) {
        if (startTime * 1 > 999 || endTime * 1 > 999) {
            this.cuePriceRateError = ' Maximum input 999';
            return;
        } else {
            this.cuePriceRateError = '';
        }
        //  If both have values , Start making comparisons 
        const startOpt = this.ruleForm.startOpt;
        const endOpt = this.ruleForm.endOpt;
        if (startOpt === 1 || startOpt === 2) {
            startTime *= this.cptTime(startOpt);
        }
        if (endOpt === 1 || endOpt === 2) {
            endTime *= this.cptTime(endOpt);
        }
        //  If the end time is greater than the start time 
        if (startTime * 1 >= endTime * 1) {
            this.cuePriceRateError = ' The end time must be greater than the start time ';
        } else {
            this.cuePriceRateError = '';
        }
    } else if ((!isEmpty(startTime) || !isEmpty(endTime))) {
        //  The maximum judgment is 999
        if (startTime * 1 > 999 || endTime * 1 > 999) {
            this.cuePriceRateError = ' Maximum input 999';
        } else {
            this.cuePriceRateError = '';
        }
    } else {
        this.cuePriceRateError = '';
    }
},