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

 需求是这样的: 

           1.最大输入999(整数)

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

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

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


    
        
            
                
                    
                
            
        
    
    
        ~
    
    
        

            
                
                    
                
            
        
    
    
        (一月=30天, 一年=365天)
    


// 上面是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 = '';
    }
},








你可能感兴趣的:(elementui,vue.js,前端)