Vue进阶（幺柒叁）：表单元素日期校验_vue中datetime校验(1)

最新推荐文章于 2024-06-17 02:30:01 发布

2401_84411557

最新推荐文章于 2024-06-17 02:30:01 发布

阅读量340

点赞数 3

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84411557/article/details/138318819

版权

程序员专栏收录该内容

217 篇文章 0 订阅

订阅专栏

               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. $KaTeX parse error: Expected 'EOF', got '&' at position 35: \dots !== undefined &̲& currentPage.$ refs[otherDateName].value !== ‘’ && currentPage. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots currentPage.$ refs[formName].validateField(otherDateName)
}
callback()
} else {
currentPage. $KaTeX parse error: Expected 'EOF', got '}' at position 74: \dotsback() }̲ } else {\dots$ refs[formName].validateField(otherDateName)
} else {
currentPage.validateFlag = !currentPage.validateFlag
if (!currentPage.validateFlag) {
currentPage. $KaTeX parse error: Expected 'EOF', got '}' at position 55: \dotsame) }̲ } // 开\dots$ refs[otherDateName] !== undefined && currentPage. $KaTeX parse error: Expected 'EOF', got '&' at position 34: \dots].value !== '' &̲& currentPage.$ refs[otherDateName].value !== undefined) {
if (value === ‘’ || value === undefined) {
// 有结束时间
callback()
} else {
if (currentPage. $KaTeX parse error: Expected 'EOF', got '}' at position 121: \dotsback() }̲ } else {\dots$ refs[formName].validateField(otherDateName)
}
// 开始时间和结束时间都没有输入
callback()
}
}
},


### 三、拓展阅读


* 《[Vue进阶（幺贰幺）：表单校验注意事项](https://bbs.csdn.net/topics/618166371)》
* 《[Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题](https://bbs.csdn.net/topics/618166371)》
* 《[Vue进阶（三十）：vue中使用element-ui进行表单验证](https://bbs.csdn.net/topics/618166371)》







### 最后

推荐一些系统学习的途径和方法。  

![路线图](https://img-blog.csdnimg.cn/img_convert/abffda3a0cfe5b9baa70f132ab55f248.png)

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

HTML 和 CSS：

![html5知识](https://img-blog.csdnimg.cn/img_convert/2ee0d943c2e65e1bf84360c1c8a40cf6.png)

![css基础知识](https://img-blog.csdnimg.cn/img_convert/f660a2fef40322a6e2c45716d4a97e02.png)