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

举报
SHQ5785 发表于 2021/03/16 01:43:35 2021/03/16
【摘要】 本文主要讲解基于element-ui datetimepicker实现日期时间,在表单校验中的校验逻辑及实现方法。 注:在表单检验时间组件时,应在检验中增加type: 'date',否则会提示检验对象错误问题。 vue部分 <!--开始/结束日期,时间--> <template> <el-row style="margin-top:...

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

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'} ]
	}
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81

校验逻辑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() } }
  },

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

拓展阅读

文章来源: shq5785.blog.csdn.net,作者:No Silver Bullet,版权归原作者所有,如需转载,请联系作者。

原文链接:shq5785.blog.csdn.net/article/details/114007435

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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