Vue-element 日期校验 结束时间大于开始时间

1、定义templete

        
          
          
        
        
          
          
        

2、定义校验规则

   rules() {
      const rules = {
        startDateTime: [
          { required: true, message: this.$t('clues.startDateTime'), trigger: 'change'},
        ],
        endDateTime: [
            { required: true, message: this.$t('clues.endDateTime'), trigger: 'change'},
            { validator: this.checkEndTime, trigger: 'change' }
        ]
      };
      return rules
    }

3、定义checkEndTime方法

 //校验结束时间
    checkEndTime(rule, value, callback) {
        if (!value) {
            callback(new Error("请选择结束时间"));
        } else {
            if (!this.startDateTime) {
                callback(new Error("请选择开始时间!"))
            } else if (Date.parse(this.startDateTime) >= Date.parse(value)) {
                callback(new Error("结束时间必须大于开始时间!"))
            } else {
                callback();
            }
        }
    }

 

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