正则表达式,日期选择器时间限制,报错原因

目录

一、正则表达式

1、表达式含义

2、书写表达式

二、时间限制

1、原始日期选择器改造

2、禁止选择未来时间

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

[三、Uncaught (in promise) Error报错](#三、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 位自然数

TypeScript 复制代码
^[0-9]{6,10}$

表达式的含义:

  • 表示匹配字符串的开头
  • 0-9\] 表示匹配数字(0-9)

  • $ 表示匹配字符串的结尾

(2)6-10位自然数或字母

TypeScript 复制代码
^[0-9a-zA-Z]{6,10}$

表达式的含义:

  • ^ 表示匹配字符串的开头
  • 0-9a-zA-Z\] 表示匹配数字(0-9)或字母(大小写不限)

  • $ 表示匹配字符串的结尾

(3)最多三位小数

TypeScript 复制代码
^[0-9]+(.[0-9]{1,3})?$

表达式的含义:

  • ^ 表示匹配字符串的开头
  • 0-9\]+ 表示匹配一个或多个数字

  • $ 表示匹配字符串的结尾

可以匹配 1、1.2、1.23、1.234,但不匹配 1.2345。


二、时间限制

日期选择器改造,将使用element-plus组件库

官方文档如下:一个 Vue 3 UI 框架 | Element Plushttps://element-plus.org/zh-CN/

1、原始日期选择器改造

(1)整理出官方最原始的日期选择器

TypeScript 复制代码
<template>
  <div class="home">
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">Default</span>
      <el-date-picker
        v-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文件中进行全局配置

TypeScript 复制代码
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、禁止选择未来时间

TypeScript 复制代码
<template>
  <div class="home">
    <div class="demo-date-picker">
      <div class="block">
        <span class="demonstration">Picker with quick options</span>
        <el-date-picker
          v-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、从...到...两个日期选择器的时间限制

TypeScript 复制代码
<template>
  <div class="home">
    <div class="demo-date-picker">
      <div class="block">
        <span class="demonstration">开始时间</span>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="Pick a day"
          :disabled-date="disabledDate1"
        />
      </div>
      <div class="block">
        <span class="demonstration">结束时间</span>
        <el-date-picker
          v-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>

三、Uncaught (in promise) Error报错

Uncaught (in promise) Error 的报错通常出现在使用 Promise 的异步操作中。下面是使用 Promise 的异步操作,一些可能出现报错的原因:

1、异步操作中的 Promise 对象没有被正确处理:当使用 Promise 进行异步操作时,应该通过调用 then 或 catch 方法来处理异步操作的结果

2、异步操作中的网络请求失败:当使用 Promise 进行网络请求时,如果请求失败或出现网络错误, Promise 对象的状态会变为 rejected,如果没有相应的 catch 语句来处理错误,就会出现 Uncaught (in promise) Error 的报错

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试