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))
相关推荐
Danny_FD9 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip14 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济19 分钟前
后端程序员的CSS复习
前端
Enddme22 分钟前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员24 分钟前
微信小程序使用 Tailwind CSS version 3
前端
wocwin34 分钟前
Vue移动端项目二次封装原生table组件,支持表头/数据动态配置(支持多级表头、排序);作用域插槽、render函数渲染某列数据等功能
vue.js
你怎么知道我是队长44 分钟前
python---eval函数
开发语言·javascript·python
溟洵1 小时前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户2519162427111 小时前
Canvas之图像合成
前端·javascript·canvas
每天开心1 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架