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

文章目录

• • 一、前言
    • 二、Demo
    • 三、拓展阅读

---

一、前言

本文主要讲解基于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)


### 最后

**一个好的心态和一个坚持的心很重要**，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。



**分享一些前端面试题以及学习路线给大家**

![](https://img-blog.csdnimg.cn/img_convert/69d69c35ff7e5e1443503ed7290657cc.webp?x-oss-process=image/format,png)

### 最后

**一个好的心态和一个坚持的心很重要**，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。



**分享一些前端面试题以及学习路线给大家**

[外链图片转存中...(img-fjnIl2sR-1718562590559)]

![](https://img-blog.csdnimg.cn/img_convert/e9fd810fd76a3cfd78fa871792ac24a9.webp?x-oss-process=image/format,png)