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+/, '')
        }
        // 最大100
        this.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 = 0
        return
      }
      const newValue = Number(value)
      this.num1 = newValue
        // 最大100
        this.num1 = Math.min(100, Math.max(0, newValue))
相关推荐
万少13 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL19 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0234 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang36 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景38 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼38 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿40 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再42 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css