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

**js部分**

import Validator from ‘@/utils/validate.js’
data() {
return {
// 开始时间
pickerOptions1: {
shortcuts: [
{
text: ‘今天’,
onClick (picker) {
picker.KaTeX parse error: Expected 'EOF', got '}' at position 40: … }̲ },…emit(‘pick’, date)
}
},
{
text: ‘后天’,
onClick (picker) {
const date = new Date()
date.setTime(date.getTime() + 3600 * 1000 * 24 * 2)
picker.KaTeX parse error: Expected 'EOF', got '}' at position 34: … }̲ },…emit(‘pick’, date)
}
}]
},
// 结束时间
pickerOptions2: {
shortcuts: [
{
text: ‘今天’,
onClick (picker) {
picker.KaTeX parse error: Expected 'EOF', got '}' at position 40: … }̲ },…emit(‘pick’, date)
}
},
{
text: ‘后天’,
onClick (picker) {
const date = new Date()
date.setTime(date.getTime() + 3600 * 1000 * 24 * 2)
picker.KaTeX parse error: Expected 'EOF', got '}' at position 34: … }̲ },…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: … !== undefined &̲& currentPage.refs[otherDateName].value !== ‘’ && currentPage.KaTeX parse error: Expected '}', got 'EOF' at end of input: … currentPage.refs[formName].validateField(otherDateName)
}
callback()
} else {
currentPage.KaTeX parse error: Expected 'EOF', got '}' at position 74: …back() }̲ } else {…refs[formName].validateField(otherDateName)
} else {
currentPage.validateFlag = !currentPage.validateFlag
if (!currentPage.validateFlag) {
currentPage.KaTeX parse error: Expected 'EOF', got '}' at position 55: …ame) }̲ } // 开…refs[otherDateName] !== undefined && currentPage.KaTeX parse error: Expected 'EOF', got '&' at position 34: …].value !== '' &̲& currentPage.refs[otherDateName].value !== undefined) {
if (value === ‘’ || value === undefined) {
// 有结束时间
callback()
} else {
if (currentPage.$refs[otherDateName].value > value) {
callback(new Error(errorMsg))
}
callback()
}
} else {

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

前端面试题宝典》，《前端面试题：常用算法》**

[外链图片转存中…(img-ZdsLac7i-1714163777183)]

[外链图片转存中…(img-vPJK83Cd-1714163777185)]

[外链图片转存中…(img-NzSvQxWX-1714163777186)]