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

原创已于 2024-09-13 12:22:02 修改 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2020-12-15 11:38:22 首次发布

前端菜鸟打怪手册专栏收录该内容

17 篇文章

订阅专栏

博客探讨了在Vue中如何使用正则表达式限制用户在`el-input`组件中只能输入最多两位小数的数字。作者指出，直接操作DOM的value属性会导致Vue的v-model无法监听到变化，因此需要手动触发`input`事件。虽然找到了解决方法，但作者认为目前的解决方案不够灵活，期待未来有更好的封装方式。

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

				<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,'')"

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

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

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

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

最后：

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

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