vue如何在input/el-input中限制只能输入数字且最多两位小数或其他,且能被v-model正常监听到?

只能输入数字且最多两位小数

				<el-input
                  placeholder="请输入价格"
                  v-model="feedsForm.price"
                  onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/);this.dispatchEvent(new Event('input'))"
                >

在标签里用原生事件onkeyup写一句代码就行。

如:只能输入数字或字母

onkeyup="this.value=this.value.replace(/[\W]/g,'');this.dispatchEvent(new Event('input'))"

但是这里有个坑!
vue的v-model是监听input框的input事件生效的。

而通过value直接操作dom元素,vue的v-model是监听不到的!

所以要手动分发一个input事件使v-model监听到。

this.dispatchEvent(new Event('input'))

当然这样会导致这句代码在每个input里面复用。也搜过其他人的封装。都感觉不是很灵活,只针对一种正则进行限制。留个坑看以后会不会封装吧。。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值