网站建设需准备什么,在线免费看电视剧的网站,关键词优化百家号,网站开发中的服务抽离目录
一、正则表达式
1、表达式含义
2、书写表达式
二、时间限制
1、原始日期选择器改造
2、禁止选择未来时间
3、从...到...两个日期选择器的时间限制
三、Uncaught (in promise) Error报错 一、正则表达式
1、表达式含义
#xff08;1#xff09;/^([a-zA-Z0-9_.…目录
一、正则表达式
1、表达式含义
2、书写表达式
二、时间限制
1、原始日期选择器改造
2、禁止选择未来时间
3、从...到...两个日期选择器的时间限制
三、Uncaught (in promise) Error报错 一、正则表达式
1、表达式含义
1/^([a-zA-Z0-9_.-])(([a-zA-Z0-9-]).)([a-zA-Z0-9]{2,4})$/
验证电子邮件地址的格式
/^ 和 /$/ 是正则表达式的起始和结束符号表示匹配整个字符串([a-zA-Z0-9_.-]) 匹配电子邮件地址的用户名部分可以由字母、数字、下划线、点号和短横线组成至少包含一个字符 匹配电子邮件地址中的at符号(([a-zA-Z0-9-])\.) 匹配电子邮件地址的域名部分可以由字母、数字和短横线组成至少包含一个子域名且每个子域名之间以点号分隔([a-zA-Z0-9]{2,4}) 匹配电子邮件地址的顶级域名部分可以由字母和数字组成长度为2到4个字符
2、书写表达式
16-10 位自然数
^[0-9]{6,10}$
表达式的含义
表示匹配字符串的开头[0-9] 表示匹配数字0-9{6,10} 表示前面的字符必须出现6-10次$ 表示匹配字符串的结尾
26-10位自然数或字母
^[0-9a-zA-Z]{6,10}$
表达式的含义
^ 表示匹配字符串的开头[0-9a-zA-Z] 表示匹配数字0-9或字母大小写不限{6,10} 表示前面的字符必须出现6-10次$ 表示匹配字符串的结尾
3最多三位小数
^[0-9](.[0-9]{1,3})?$
表达式的含义
^ 表示匹配字符串的开头[0-9] 表示匹配一个或多个数字(.[0-9]{1,3})? 表示匹配一个小数点及其后面的1-3位数字并且整个部分是可选的可以出现0次或1次$ 表示匹配字符串的结尾
可以匹配 1、1.2、1.23、1.234但不匹配 1.2345。 二、时间限制 日期选择器改造将使用element-plus组件库 官方文档如下一个 Vue 3 UI 框架 | Element Plushttps://element-plus.org/zh-CN/ 1、原始日期选择器改造
1整理出官方最原始的日期选择器
templatediv classhomediv classdemo-date-pickerdiv classblockspan classdemonstrationDefault/spanel-date-pickerv-modelvalue1typedateplaceholderPick a day:sizesize//div/div/div
/templatescript langts setup
import { ref } from vueconst size refdefault | large | small(default)const value1 ref()
/scriptstyle scoped
.demo-date-picker {display: flex;width: 100%;padding: 0;flex-wrap: wrap;
}.demo-date-picker .block {padding: 30px 0;text-align: center;border-right: solid 1px var(--el-border-color);flex: 1;
}.demo-date-picker .block:last-child {border-right: none;
}.demo-date-picker .demonstration {display: block;color: var(--el-text-color-secondary);font-size: 14px;margin-bottom: 20px;
}
/style 2切换语言 Element Plus 的默认语言为英语改造成中文需要引入国际化配置 在main.ts文件中进行全局配置
import { createApp } from vue
import ElementPlus from element-plus
import element-plus/dist/index.css
import zhCn from element-plus/es/locale/lang/zh-cn
import App from ./App.vue
import router from ./router
import store from ./storecreateApp(App).use(store).use(router).use(ElementPlus,{locale: zhCn,
}).mount(#app) 2、禁止选择未来时间
templatediv classhomediv classdemo-date-pickerdiv classblockspan classdemonstrationPicker with quick options/spanel-date-pickerv-modelvalue2typedateplaceholderPick a day:disabled-datedisabledDate//div/div/div
/templatescript langts setup
import { ref } from vue;const value2 ref();const disabledDate (time: Date) {return time.getTime() Date.now();
};
/scriptstyle scoped
.demo-date-picker {display: flex;width: 100%;padding: 0;flex-wrap: wrap;
}.demo-date-picker .block {padding: 30px 0;text-align: center;border-right: solid 1px var(--el-border-color);flex: 1;
}.demo-date-picker .block:last-child {border-right: none;
}.demo-date-picker .demonstration {display: block;color: var(--el-text-color-secondary);font-size: 14px;margin-bottom: 20px;
}
/style3、从...到...两个日期选择器的时间限制
templatediv classhomediv classdemo-date-pickerdiv classblockspan classdemonstration开始时间/spanel-date-pickerv-modelvalue1typedateplaceholderPick a day:disabled-datedisabledDate1//divdiv classblockspan classdemonstration结束时间/spanel-date-pickerv-modelvalue2typedateplaceholderPick a day:disabled-datedisabledDate2//div/div/div
/templatescript langts setup
import { ref } from vue;
const value1 ref();
const value2 ref();const disabledDate1 (time: Date) {return time.getTime() new Date(value2.value).getTime()
};
const disabledDate2 (time: Date) {return time.getTime() new Date(value1.value).getTime()
};
/scriptstyle scoped
.demo-date-picker {display: flex;width: 100%;padding: 0;flex-wrap: wrap;
}.demo-date-picker .block {padding: 30px 0;text-align: center;border-right: solid 1px var(--el-border-color);flex: 1;
}.demo-date-picker .block:last-child {border-right: none;
}.demo-date-picker .demonstration {display: block;color: var(--el-text-color-secondary);font-size: 14px;margin-bottom: 20px;
}
/style三、Uncaught (in promise) Error报错
Uncaught (in promise) Error 的报错通常出现在使用 Promise 的异步操作中。下面是使用 Promise 的异步操作一些可能出现报错的原因
1、异步操作中的 Promise 对象没有被正确处理当使用 Promise 进行异步操作时应该通过调用 then 或 catch 方法来处理异步操作的结果
2、异步操作中的网络请求失败当使用 Promise 进行网络请求时如果请求失败或出现网络错误 Promise 对象的状态会变为 rejected如果没有相应的 catch 语句来处理错误就会出现 Uncaught (in promise) Error 的报错
