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

el-input限制输入数字,输入中文后数字校验失效

想要的效果:默认值为0,只能输入0-100的数字。

实现方式如下,使用 οnkeyup="this.value=this.value.replace(/\D/g,‘’)"限制只能输入数字,输入数字没有问题,使用@input实现数字不以0开头,也只能是0-100。但是当输入汉字时,确实没有显示上去,再输入数字能正常显示输入,但是校验不起作用了,超100的数字也能输入。

<el-input v-model="num1" maxlength="3"  onkeyup="this.value=this.value.replace(/\D/g,'')" @input="rowNumSingle"/>
rowNumSingle(value ) {
if (value === '0' || !value.startsWith('0')) {this.num1 = value} else {// 以0开头this.num1 = value[0] === '0' ? '0' : value.replace(/^0+/, '')}// 最大100this.num1 = Math.min(100, Math.max(0, value))
}

修改后的实现:先判断是否为数字,不是数字直接设为初始值0,否获取输入的数字并赋值

<el-input v-model="num1"  maxlength="3"  @input="rowNumSingle" />
if(isNaN(Number(value)) || value === '' ){this.num1 = 0return}const newValue = Number(value)this.num1 = newValue// 最大100this.num1 = Math.min(100, Math.max(0, newValue))

相关文章:

  • 回归任务和分类任务损失函数详解
  • 采用 Docker GPU 部署的 Ubuntu 或者 windows 桌面环境
  • el-table 树形数据,子行数据可以异步加载
  • 录制mp4
  • 【设计模式-4.8】行为型——中介者模式
  • OPENCV重点结构体Mat的讲解
  • C语言数据结构笔记3:Union联合体+结构体取8位Bool量
  • CentOS7关闭防火墙、Linux开启关闭防火墙
  • WebFuture:Ubuntu 系统上在线安装.NET Core 8 的步骤
  • OpenCV 键盘响应来切换图像
  • 实现C语言中srand()和rand()函数
  • .NET Core接口IServiceProvider
  • iptables实战案例
  • 【.net core】【watercloud】树形组件combotree导入及调用
  • Asp.net Core 通过依赖注入的方式获取用户
  • itop-3568开发板机器视觉opencv开发手册-图像绘制-画线
  • 【p2p、分布式,区块链笔记 MESH】 论文阅读 Thread/OpenThread Low-Power Wireless Multihop Net
  • Mac/iOS 如何解压 RAR 格式压缩包:常用工具与详细操作步骤
  • 【vue3学习】vue3入门
  • Flink进阶之路:解锁大数据处理新境界
  • 庆元县住房和城乡建设局网站/基本营销策略有哪些
  • 网站域名变更怎么查询/关键词优化排名用什么软件比较好
  • 网站制作真人游戏娱乐平台怎么做/丈哥seo博客
  • 网站做301还是302/爱站网关键词查询网站的工具
  • 做设计找图片的网站/网站新站整站排名
  • 武汉便宜的做网站公司/营销推广活动策划方案