Vue进阶（幺柒叁）：表单元素日期校验

本文主要讲解基于`element-ui` `datetimepicker`实现日期时间，在表单校验中的校验逻辑及实现方法。

**注：在表单检验时间组件时，应在检验中增加`type: 'date'`，否则会提示检验对象错误问题。**

**vue部分**

<!--开始/结束日期,时间-->
<template>
 <el-row style="margin-top: 13px;">
  <el-col :span="12">
    <!--开始日期,时间-->
    <el-form-item label="开始日期,时间" prop="start">
      <el-date-picker
        ref="start"
        v-model="eventFormModel.start"
        type="datetime"
        placeholder="请选择日期时间"
        align="right"
        :picker-options="pickerOptions1">
      </el-date-picker>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <!--结束日期,时间-->
    <el-form-item label="结束日期,时间" prop="end">
      <el-date-picker
        ref="end"
        v-model="eventFormModel.end"
        type="datetime"
        placeholder="请选择日期时间"
        align="right"
        :picker-options="pickerOptions2">
      </el-date-picker>
    </el-form-item>
  </el-col>
 </el-row>
</template>

**js部分**

import Validator from '@/utils/validate.js'
data() {
    return {
         // 开始时间
           pickerOptions1: {
             shortcuts: [
               {
                 text: '今天',
                 onClick (picker) {
                   picker.$emit('pick', new Date())
                 }
               },
               {
                 text: '明天',
                 onClick (picker) {
                   const date = new Date()
                   date.setTime(date.getTime() + 3600 * 1000 * 24)
                   picker.$emit('pick', date)
                 }
               },
               {
                 text: '后天',
                 onClick (picker) {
                   const date = new Date()
                   date.setTime(date.getTime() + 3600 * 1000 * 24 * 2)
                   picker.$emit('pick', date)
                 }
               },
               {
                 text: '一周后',
                 onClick (picker) {
                   const date = new Date()
                   date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
                   picker.$emit('pick', date)
                 }
               }]
           },
           // 结束时间
           pickerOptions2: {
             shortcuts: [
               {
                 text: '今天',
                 onClick (picker) {
                   picker.$emit('pick', new Date())
                 }
               },
               {
                 text: '明天',
                 onClick (picker) {
                   const date = new Date()
                   date.setTime(date.getTime() + 3600 * 1000 * 24)
                   picker.$emit('pick', date)
                 }
               },
               {
                 text: '后天',
                 onClick (picker) {
                   const date = new Date()
                   date.setTime(date.getTime() + 3600 * 1000 * 24 * 2)
                   picker.$emit('pick', date)
                 }
               },
               {
                 text: '一周后',
                 onClick (picker) {
                   const date = new Date()
                   date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
                   picker.$emit('pick', date)
                 }
               }]
           },
             start: [
               { type: 'date', required: true, message: '请选择开始日期、时间', trigger: 'blur' },
               {validator: Validator.validateStartDate(this, 'end', 'eventFormModel'), trigger: 'blur, change'}
             ],
             end: [
               { type: 'date', required: true, message: '请选择结束日期、时间', trigger: 'blur' },
               {validator: Validator.validateEndDate(this, 'start', 'eventFormModel', this.$t('flowMonitor.message.limitDate')), trigger: 'blur, change'}
             ]
    }
}

**校验逻辑validate.js**

  /*
   * 日期前一个输入框校验
   */
  validateStartDate (currentPage, otherDateName, formName) {
    return (rule, value, callback) => {
      if (currentPage.$refs[otherDateName] !== undefined && currentPage.$refs[otherDateName].value !== '' && currentPage.$refs[otherDateName].value !== undefined) {
        if (value === '' || value === undefined) {
//              有结束时间
          currentPage.validateFlag = !currentPage.validateFlag
          if (!currentPage.validateFlag) {
            currentPage.$refs[formName].validateField(otherDateName)
          }
          callback()
        } else {
          currentPage.$refs[formName].validateField(otherDateName)
          callback()
        }
      } else {
        if (value !== '' && value !== undefined) {
          currentPage.$refs[formName].validateField(otherDateName)
        } else {
          currentPage.validateFlag = !currentPage.validateFlag
          if (!currentPage.validateFlag) {
            currentPage.$refs[formName].validateField(otherDateName)
          }
        }
//           开始时间和结束时间都没有输入
        callback()
      }
    }
  },
  /*
   * 时间第二个输入框校验
   */
  validateEndDate (currentPage, otherDateName, formName, errorMsg) {
    return (rule, value, callback) => {
      if (currentPage.$refs[otherDateName] !== undefined && currentPage.$refs[otherDateName].value !== '' && currentPage.$refs[otherDateName].value !== undefined) {
        if (value === '' || value === undefined) {
//              有结束时间
          callback()
        } else {
          if (currentPage.$refs[otherDateName].value > value) {
            callback(new Error(errorMsg))
          }
          callback()
        }
      } else {
        currentPage.validateFlag = !currentPage.validateFlag
        if (!currentPage.validateFlag) {
          currentPage.$refs[formName].validateField(otherDateName)
        }
        // 开始时间和结束时间都没有输入
        callback()
      }
    }
  },

## 拓展阅读
- 《Vue进阶（幺贰幺）：表单校验注意事项》
- 《Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs\[formName\].validate()的问题》
- 《Vue进阶（三十）：vue中使用element-ui进行表单验证》
-