当前位置：首页 > news >正文

唐山网站建设培训软文推广

news 2025/7/13 12:12:38

唐山网站建设培训,软文推广,手机网站设计宽度,克拉玛依市建设局官方网站目录一、正则表达式 1、表达式含义 2、书写表达式二、时间限制 1、原始日期选择器改造 2、禁止选择未来时间 3、从...到...两个日期选择器的时间限制三、Uncaught (in promise) Error报错一、正则表达式 1、表达式含义 （1）/^([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、书写表达式

（1）6-10 位自然数

^[0-9]{6,10}$

表达式的含义：

表示匹配字符串的开头
[0-9] 表示匹配数字（0-9）
{6,10} 表示前面的字符必须出现6-10次
$ 表示匹配字符串的结尾

（2）6-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）整理出官方最原始的日期选择器

<template><div class="home"><div class="demo-date-picker"><div class="block"><span class="demonstration">Default</span><el-date-pickerv-model="value1"type="date"placeholder="Pick a day":size="size"/></div></div></div>
</template><script lang="ts" setup>
import { ref } from 'vue'const size = ref<'default' | 'large' | 'small'>('default')const value1 = ref('')
</script><style 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 './store'createApp(App).use(store).use(router).use(ElementPlus,{locale: zhCn,
}).mount('#app')

2、禁止选择未来时间

<template><div class="home"><div class="demo-date-picker"><div class="block"><span class="demonstration">Picker with quick options</span><el-date-pickerv-model="value2"type="date"placeholder="Pick a day":disabled-date="disabledDate"/></div></div></div>
</template><script lang="ts" setup>
import { ref } from "vue";const value2 = ref("");const disabledDate = (time: Date) => {return time.getTime() > Date.now();
};
</script><style 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>

3、从...到...两个日期选择器的时间限制

<template><div class="home"><div class="demo-date-picker"><div class="block"><span class="demonstration">开始时间</span><el-date-pickerv-model="value1"type="date"placeholder="Pick a day":disabled-date="disabledDate1"/></div><div class="block"><span class="demonstration">结束时间</span><el-date-pickerv-model="value2"type="date"placeholder="Pick a day":disabled-date="disabledDate2"/></div></div></div>
</template><script lang="ts" 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()
};
</script><style 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>