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))
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值