当前位置: 首页 > 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))
http://www.xdnf.cn/news/865279.html

相关文章:

  • 【输入URL到页面展示】
  • 一文读懂RAG流程中用到的请求参数与返回字段
  • HTMLCSS 学习总结
  • (T/SAIAS 020-2024)《医疗大模型语料一体机应用指南》深度解读与实施分析
  • Shiro安全权限框架
  • OpenCV CUDA模块图像处理------图像连通域标记接口函数connectedComponents()
  • iOS UIActivityViewController 组头处理
  • OSPF域间路由
  • fastadmin fildList 动态下拉框默认选中
  • parquet :开源的列式存储文件格式
  • 【PhysUnits】15.13 SI类型级量纲(dimension.rs)
  • 针对KG的神经符号集成综述 两篇
  • 企业级实战之Iptables防火墙案例分析
  • 11. 试学内容-如何理解隔离性2(原理)
  • mysql知识点
  • Axios学习笔记
  • 技术文档的降维打击:3大原则+5步结构+CSDN流量密码
  • 瀚文机械键盘固件开发详解:HWKeyboard.cpp文件解析与应用
  • linux 故障处置通用流程-36计+1计
  • 传输层协议 UDP 介绍 -- UDP 协议格式,UDP 的特点,UDP 的缓冲区
  • OPENCV的AT函数
  • 验证负载均衡与弹性伸缩
  • Nginx+Tomcat负载均衡与动静分离架构
  • 保险丝选型
  • Java基础原理与面试高频考点
  • 沉金PCB电路板制造有哪些操作要点需要注意?
  • 论文导读 | 区间数据管理
  • C#由于获取WPF窗口名称造成的异常报错问题
  • SQL 中 NOT IN 的陷阱?
  • 如何确定微服务的粒度与边界