Vue进阶(幺柒叁):表单元素日期校验_vue中datetime校验

news/2024/11/13 15:14:33/

**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 {

最后

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

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

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

<a class=前端面试题宝典" />

<a class=前端校招面试题详解" />

前端面试题宝典》,《前端面试题:常用算法》**

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

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

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


http://www.ppmy.cn/news/1440072.html

相关文章

WSL2无法ping通本地主机ip的解决办法

刚装完WSL2的Ubuntu子系统时&#xff0c;可能无法ping通本地主机的ip&#xff1a; WSL2系统ip&#xff1a; 本地主机ip&#xff1a; 在powershell里输入如下的命令&#xff1a; New-NetFirewallRule -DisplayName "WSL" -Direction Inbound -InterfaceAlias &quo…

深入了解 npm

深入了解 npm&#xff1a;Node.js 的强大包管理工具 Node.js 的开发者们都知道&#xff0c;有效的包管理是任何项目成功的关键之一。这里&#xff0c;我们将深入探讨 npm&#xff08;Node Package Manager&#xff09;&#xff0c;这是 Node.js 最受欢迎的包管理器&#xff0c…

Restful API 具体设计规范(概述)

协议 https 域名 https://www.baidu.com/api 版本 https://www.baidu.com/v1 路径 https://www.baidu.com/v1/blogs 方法 数据过滤 状态码返回结果 返回的数据格式 尽量使用 JSON&#xff0c;避免使用 XML。 总结&#xff1a; 看 url 就知道要什么看 http method 就知道干…

【Websokect】服务器https协议下ws连接失败问题及解决办法

在服务器使用HTTPS协议下连接WebSocket时&#xff0c;通常会出现一些常见的问题导致连接失败。以下是一些可能的原因和解决办法&#xff1a; SSL证书配置问题&#xff1a; 确保您的服务器上已正确配置SSL证书&#xff0c;并且证书有效。如果证书配置不正确或者过期&#xff0c;…

springboot+thymeleaf实现一个简单的监听在线人数功能

功能步骤&#xff1a; 1. 当用户访问登录页面时&#xff0c;Logincontroller的showLoginForm方法被调用&#xff0c;返回登录页面的视图名字。 2. 用户提交表单&#xff0c;调用LoginController的login方法。 3.login方法 4.登录验证通过&#xff0c;home方法会被调用&#xf…

# IDEA2019 如何打开 Run Dashboard 运行仪表面板

IDEA2019 如何打开 Run Dashboard 运行仪表面板 段子手168 1、依次点击 IDEA 上面工具栏 —> 【View】 视图。 —> 【Tool Windows】 工具。 —> 【Run Dashboard】 运行仪表面板。 2、如果 【Tool Windows 】工具包 没有 【Run Dashboard】 运行仪表面板 项 依次…

C++ map和set的应用

1. 关联式容器 我们已经接触过STL中的部分容器&#xff0c;比如&#xff1a;vector、list、deque、 forward_list(C11)等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面存储的是元素本身。那什么是关联式容器&#xff1f;它…

Elasticsearch 精确查询:术语查询、多术语查询、主键查询、范围查询、存在查询、前缀查询、正则查询与通配符查询

为了深入理解Elasticsearch的各种精确查询方法&#xff0c;我们将通过一系列示例来演示术语查询、多术语查询、主键查询、范围查询、存在查询、前缀查询、正则查询和通配符查询的应用场景。首先&#xff0c;我们为示例准备一组数据&#xff1a; POST person/_doc/1 {"id&…