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

前端常用的条件限制方法小笔记

手机号的正则表达式(以1开头的11位数字)

function checkPhone(){ var phone = document.getElementById('phone').value;if(!(/^1[3456789]\d{9}$/.test(phone))){ alert("手机号码有误,请重填");  return false; } 
}

限制输入大于0且最小值要小于最大值

@change="onInputNumChange"
    // 数值改变(调整方式为减少,并且减少数量大于当前总数时,自动赋值总数)onInputNumChange(newVal) {if (this.ctrlType === 2 && newVal > this.cacheMaxNum) {this.ctrlNum = this.cacheMaxNum;}

限制只能选择今天之后的日期,且只能6个月以内

// :picker-options="dateRange" :当前时间日期选择器特有的选项参考下表
// 通过设置picker-options来达到限制可选择的时间范围
<el-date-picker v-model="time" type="daterange" range-separator="至"start-placeholder="选择开始日期" end-placeholder="选择结束日期" :clearable="false":picker-options="dateRange">
</el-date-picker>
// vue中的data中定义
data() {return {// 日期选择器可选择范围dateRange: {disabledDate(time) {// 限制最早只能从5月份开始查询// 当前日期小于2021-04-30禁止选择return new Date(time).getTime() < new Date('2021-04-30').getTime();// 也可以设置最大可选择日期// 当前日期小于2021-04-30或者大于2021-05-31都禁止选择// return new Date(time).getTime() < new Date('2021-04-30').getTime() || new Date(time).getTime() > new Date('2021-05-31').getTime();},},}
}

或者

<el-date-picker class="filter-item" type="daterange"  value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
</el-date-picker>
pickerOptions: {onPick: ({ maxDate, minDate }) => {this.choiceDate = minDate.getTime()if (maxDate) {this.choiceDate = ''}},disabledDate: (time) => {if (!isNull(this.choiceDate)) {const one = 30 * 24 * 3600 * 1000const minTime = this.choiceDate - oneconst maxTime = this.choiceDate + onereturn time.getTime() < minTime || time.getTime() > maxTime}}
},
choiceDate: ''
http://www.lryc.cn/news/100913.html

相关文章:

  • 【LeetCode 算法】Minimum Operations to Halve Array Sum 将数组和减半的最少操作次数-Greedy
  • Doc as Code (3):业内人士的观点
  • 【Kafka】消息队列Kafka基础
  • Java的第十五篇文章——网络编程(后期再学一遍)
  • 【深度学习】High-Resolution Image Synthesis with Latent Diffusion Models,论文
  • 前端学习——Vue (Day6)
  • STM32MP157驱动开发——按键驱动(tasklet)
  • PostgreSQL构建时间
  • 2023-将jar包上传至阿里云maven私有仓库(云效制品仓库)
  • 嵌入式linux之OLED显示屏SPI驱动实现(SH1106,ssd1306)
  • 关于element ui 安装失败的问题解决方法、查看是否安装成功及如何引入
  • Selenium多浏览器处理
  • 浅谈 AI 大模型的崛起与未来展望:马斯克的 xAI 与中国产业发展
  • 【CesiumJS材质】(1)圆扩散
  • 实战-单例模式和创建生产者相结合
  • [SQL挖掘机] - 窗口函数介绍
  • 原生js实现锚点滚动顶部
  • 使用mysql接口遇到点问题
  • excel绘制折线图或者散点图
  • ChatGPT长文本对话输入方法
  • FFmpeg-swresample的更新
  • 回答网友 修改一个exe
  • 数据可视化 - 动态柱状图
  • 【JVM】JVM五大内存区域介绍
  • 自动驾驶感知系统--惯性导航定位系统
  • Netty简介
  • 基于TCP/IP对等模型对计算机网络知识点的整合
  • 【SQL应知应会】表分区(一)• Oracle版
  • PostgreSQL 常用空间处理函数
  • ubuntu初始化/修改root密码