Vue进阶(幺柒叁):表单元素日期校验
【摘要】 本文主要讲解基于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
拓展阅读
- 《Vue进阶(幺贰幺):表单校验注意事项》
- 《Vue进阶(幺幺叁):关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》
- 《Vue进阶(三十):vue中使用element-ui进行表单验证》
文章来源: shq5785.blog.csdn.net,作者:No Silver Bullet,版权归原作者所有,如需转载,请联系作者。
原文链接:shq5785.blog.csdn.net/article/details/114007435
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)