Vue进阶(幺柒叁):表单元素日期校验

Alex799
• 阅读 1449

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

拓展阅读

本文转自 https://shq5785.blog.csdn.net/article/details/114007435,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Stella981 Stella981
3年前
HIVE 时间操作函数
日期函数UNIX时间戳转日期函数: from\_unixtime语法:   from\_unixtime(bigint unixtime\, string format\)返回值: string说明: 转化UNIX时间戳(从19700101 00:00:00 UTC到指定时间的秒数)到当前时区的时间格式举例:hive   selec
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这