表单元素日期校验

举报
SHQ5785 发表于 2024/04/02 09:17:51 2024/04/02
【摘要】 一、前言本文主要讲解基于element-ui datetimepicker实现日期时间,在表单校验中的校验逻辑及实现方法。注:在表单检验时间组件时,应在检验中增加type: 'date',否则会提示检验对象错误问题。 二、Demovue部分<!--开始/结束日期,时间--><template> <el-row style="margin-top: 13px;"> <el-col :spa...

一、前言

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

三、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。