iView之DatePicker的datetimerange校驗

使用DatePicker的type是datetimerange時，處理開始--結束的持續時間校驗如下。
遇到的問題：
時間彈出校驗提示，但是程序還是會繼續往下走，所以調完校驗后，再做判斷開始時間是否為true，再調接口。

view:

 <Col span="8">
              <FormItem label="時間段:" prop="dates">
                <DatePicker type="datetimerange" placeholder="Select date" v-model="formValidate.dates"
                            style="width: 100%" @on-change="changeTime">
                </DatePicker>
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem class="inline-submit">
                <Button type="primary" @click="queryClick">查詢</Button>
              </FormItem>
              </Col>

js:

 

*****data:
formValidate: {
          name: '',
          dates: []
        },

        ruleValidate: { //表單校驗
          name: [
            {required: true, message: 'The name cannot be empty', trigger: 'blur'}
          ],
          dates: [{
            required: true,
            type: 'array',
            message: "Please select the date",
            trigger: 'blur',
            fields: {
              0: {type: "date", required: true, message: "Please select the date"},
              1: {type: "date", required: true, message: "Please select the date"}
            }
          }]
        },


*******methods:
handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('Success!');
          } else {
            this.$Message.error('Fail!');
          }
        });
      },

queryClick() {
        this.handleSubmit('formValidate1');
        if (this.startDate) {
          this.stationRequest();  //調接口
        }
      }，

// 時間觸發
changeTime(val) {
  this.startDate = val[0];
  this.endDate = val[1];
}