elementUI表单校验(a校验b，b校验a)

项目中使用了 el-date-picker 组件，用来让用户选择开始时间和结束时间，要求如下：

• 选择开始时间的时候校验截止时间

  • 如果截止时间为空提示用户选择截止时间
  • 如果截止时间早于开始时间提示 '截止时间不能早于开始时间'

• 选择截止时间的时候校验开始时间

  • 如果开始时间为空提示用户选择开始时间
  • 如果开始时间晚于截止时间提示 '开始时间不能晚于截止时间'
• 最终提交的时候如果两者都没有选，允许提交

---

代码如下：

<template>
  <div class="history">
    <el-form
     :inline="true" 
     :rules="rules"
     ref="ruleForm"
     :model="searchForm" 
     class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="searchForm.handler" placeholder="操作人"></el-input>
      </el-form-item>
      <el-form-item label="" style="margin-right: 20px;">
        <el-input v-model="searchForm.handelContent" placeholder="操作内容"></el-input>
      </el-form-item>
      <el-form-item prop="startTime" label="操作时间:">
        <el-date-picker
          v-model="searchForm.startTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          :clearable="true"
          class="width180"
          placeholder="开始时间"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item prop="endTime" label="">
        <el-date-picker
          v-model="searchForm.endTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          :clearable="true"
          class="width180"
          placeholder="截止时间"
          default-time="23:59:59"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>




  </div>
</template>

<script>
export default {
data () {
  return {
    searchForm: {
      handler: '',  
      handelContent: '',
      startTime: '',
      endTime: ''
    },
    rules: {
      startTime: [
        {validator: this.validStart, trigger: 'change'}
      ],
      endTime: [
        {validator: this.validEnd, trigger: 'change'}
      ]
    }
  }
},
methods: {
  validStart(rule, value, callback){
    let flag = this.judgeTime(rule.field)
    if(flag == 'again'){  // 没选结束时间
      this.$refs['ruleForm'].validateField('endTime')
    }
    if(flag != 'nothing' && flag != 'again'){
      callback(new Error(flag));
    }
    if(flag == 'nothing'){
      callback()
    }
  },
  validEnd(rule, value, callback){
    let flag = this.judgeTime(rule.field)
    if(flag == 'again'){  // 没选开始时间
      this.$refs['ruleForm'].validateField('startTime')
    }
    if(flag != 'nothing' && flag != 'again'){
      callback(new Error(flag));
    }
    if(flag == 'nothing'){
      callback()
    }
  },
  judgeTime(type){
    //最终提交的时候两个可以都为空
    if(!this.searchForm.startTime && !this.searchForm.endTime){
      return 'nothing'
    }
    // 一方为空校验
    if(type == 'startTime' && !this.searchForm.startTime){
      return '请选择开始时间'
    }
    if(type == 'endTime' && !this.searchForm.endTime){
      return '请选择截止时间'
    }
    // 单独校验另一字段
    if((type == 'startTime' && !this.searchForm.endTime) || type == 'endTime' && !this.searchForm.startTime){
      return 'again'
    }
    let sTimes = new Date(this.searchForm.startTime).getTime()
    let eTimes = new Date(this.searchForm.endTime).getTime()
    if(sTimes > eTimes){
      return type == 'startTime'? '开始时间不能晚于截止时间': '截止时间不能早于开始时间'
    }
    if(eTimes - sTimes > 2592000000){
      return '查询时间限制30天以内'
    }
    return 'nothing'
  },
  onSubmit(){
    this.$refs['ruleForm'].validate((valid) => {
      if (valid) {
        alert('submit!');
      } else {
        console.log('error submit!!');
        return false;
      }
    })
  },
  searchPage1(){

  }
},
created () {
  
}
}
</script>

<style lang='scss' scoped>
.history{
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  width: 100%;
  height: 100%;
}
</style>