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

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