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

本文主要讲解基于element-ui datetimepicker实现日期时间，在表单校验中的校验逻辑及实现方法。

注：在表单检验时间组件时，应在检验中增加type: 'date'，否则会提示检验对象错误问题。

vue部分

1<!--开始/结束日期,时间-->
2<template>
3 <el-row style="margin-top: 13px;">
4  <el-col :span="12">
5    <!--开始日期,时间-->
6    <el-form-item label="开始日期,时间" prop="start">
7      <el-date-picker
8        ref="start"
9        v-model="eventFormModel.start"
10        type="datetime"
11        placeholder="请选择日期时间"
12        align="right"
13        :picker-options="pickerOptions1">
14      </el-date-picker>
15    </el-form-item>
16  </el-col>
17  <el-col :span="12">
18    <!--结束日期,时间-->
19    <el-form-item label="结束日期,时间" prop="end">
20      <el-date-picker
21        ref="end"
22        v-model="eventFormModel.end"
23        type="datetime"
24        placeholder="请选择日期时间"
25        align="right"
26        :picker-options="pickerOptions2">
27      </el-date-picker>
28    </el-form-item>
29  </el-col>
30 </el-row>
31</template>

js部分

1import Validator from '@/utils/validate.js'
2data() {
3	return {
4		 // 开始时间
5	       pickerOptions1: {
6	         shortcuts: [
7	           {
8	             text: '今天',
9	             onClick (picker) {
10	               picker.$emit('pick', new Date())
11	             }
12	           },
13	           {
14	             text: '明天',
15	             onClick (picker) {
16	               const date = new Date()
17	               date.setTime(date.getTime() + 3600 * 1000 * 24)
18	               picker.$emit('pick', date)
19	             }
20	           },
21	           {
22	             text: '后天',
23	             onClick (picker) {
24	               const date = new Date()
25	               date.setTime(date.getTime() + 3600 * 1000 * 24 * 2)
26	               picker.$emit('pick', date)
27	             }
28	           },
29	           {
30	             text: '一周后',
31	             onClick (picker) {
32	               const date = new Date()
33	               date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
34	               picker.$emit('pick', date)
35	             }
36	           }]
37	       },
38	       // 结束时间
39	       pickerOptions2: {
40	         shortcuts: [
41	           {
42	             text: '今天',
43	             onClick (picker) {
44	               picker.$emit('pick', new Date())
45	             }
46	           },
47	           {
48	             text: '明天',
49	             onClick (picker) {
50	               const date = new Date()
51	               date.setTime(date.getTime() + 3600 * 1000 * 24)
52	               picker.$emit('pick', date)
53	             }
54	           },
55	           {
56	             text: '后天',
57	             onClick (picker) {
58	               const date = new Date()
59	               date.setTime(date.getTime() + 3600 * 1000 * 24 * 2)
60	               picker.$emit('pick', date)
61	             }
62	           },
63	           {
64	             text: '一周后',
65	             onClick (picker) {
66	               const date = new Date()
67	               date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
68	               picker.$emit('pick', date)
69	             }
70	           }]
71	       },
72	         start: [
73	           { type: 'date', required: true, message: '请选择开始日期、时间', trigger: 'blur' },
74	           {validator: Validator.validateStartDate(this, 'end', 'eventFormModel'), trigger: 'blur, change'}
75	         ],
76	         end: [
77	           { type: 'date', required: true, message: '请选择结束日期、时间', trigger: 'blur' },
78	           {validator: Validator.validateEndDate(this, 'start', 'eventFormModel', this.$t('flowMonitor.message.limitDate')), trigger: 'blur, change'}
79	         ]
80	}
81}

校验逻辑validate.js

1 /*
2   * 日期前一个输入框校验
3   */
4  validateStartDate (currentPage, otherDateName, formName) {
5    return (rule, value, callback) => {
6      if (currentPage.$refs[otherDateName] !== undefined && currentPage.$refs[otherDateName].value !== '' && currentPage.$refs[otherDateName].value !== undefined) {
7        if (value === '' || value === undefined) {
8//              有结束时间
9          currentPage.validateFlag = !currentPage.validateFlag
10          if (!currentPage.validateFlag) {
11            currentPage.$refs[formName].validateField(otherDateName)
12          }
13          callback()
14        } else {
15          currentPage.$refs[formName].validateField(otherDateName)
16          callback()
17        }
18      } else {
19        if (value !== '' && value !== undefined) {
20          currentPage.$refs[formName].validateField(otherDateName)
21        } else {
22          currentPage.validateFlag = !currentPage.validateFlag
23          if (!currentPage.validateFlag) {
24            currentPage.$refs[formName].validateField(otherDateName)
25          }
26        }
27//           开始时间和结束时间都没有输入
28        callback()
29      }
30    }
31  },
32  /*
33   * 时间第二个输入框校验
34   */
35  validateEndDate (currentPage, otherDateName, formName, errorMsg) {
36    return (rule, value, callback) => {
37      if (currentPage.$refs[otherDateName] !== undefined && currentPage.$refs[otherDateName].value !== '' && currentPage.$refs[otherDateName].value !== undefined) {
38        if (value === '' || value === undefined) {
39//              有结束时间
40          callback()
41        } else {
42          if (currentPage.$refs[otherDateName].value > value) {
43            callback(new Error(errorMsg))
44          }
45          callback()
46        }
47      } else {
48        currentPage.validateFlag = !currentPage.validateFlag
49        if (!currentPage.validateFlag) {
50          currentPage.$refs[formName].validateField(otherDateName)
51        }
52        // 开始时间和结束时间都没有输入
53        callback()
54      }
55    }
56  },

拓展阅读

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

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

拓展阅读

评论区

相关推荐