Vue 表单元素日期校验

一、前言

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

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

二、Demo

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进行表单验证》