el-form-item 包含两个input, 校验这两个input

 需求是这样的: 

           1.最大输入999(整数)

           2.不能为空, 最少填一项

           3.最大值必须大于最小值

           4.可以选择年月日, 一年按照365天计算, 一月按照30天计算

<el-form-item
    v-if="ruleForm.goodsWay === 1"
    label="保质期范围"
    :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)));"
这段代码是控制不让输入非数字的 -->
            <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">
        (一月=30天, 一年=365天)
    </el-col>
</el-form-item>

// 上面是html就是两个输入框和两个下拉框

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

// 方法:
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.先判断看两个框是不是都是空的, 如果都是空的提示
//  2.在输入一项和输入两项都需要判断是不是大于999
//  3.如果两项都输入,且都没有大于999, 判断前一项是否大于后一项
//  4.这里只是给一个提示,并不能真正的阻止表单提交, 要阻止在提交时判断this.cuePriceRateError 是否为空即可

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

    let startTime = this.ruleForm.startTime;
    let endTime = this.ruleForm.endTime;
    // 如果两项都没有输入
    if (isEmpty(startTime) && isEmpty(endTime)) {
        this.cuePriceRateError = '请至少输入一项';
    } else if ((!isEmpty(startTime) && !isEmpty(endTime))) {
        if (startTime * 1 > 999 || endTime * 1 > 999) {
            this.cuePriceRateError = '最大输入999';
            return;
        } else {
            this.cuePriceRateError = '';
        }
        // 如果两个都有值,开始做比较
        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 (startTime * 1 >= endTime * 1) {
            this.cuePriceRateError = '结束时间需大于开始时间';
        } else {
            this.cuePriceRateError = '';
        }
    } else if ((!isEmpty(startTime) || !isEmpty(endTime))) {
        // 判断最大为999
        if (startTime * 1 > 999 || endTime * 1 > 999) {
            this.cuePriceRateError = '最大输入999';
        } else {
            this.cuePriceRateError = '';
        }
    } else {
        this.cuePriceRateError = '';
    }
},