重点-有效- 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里面复用。也搜过其他人的封装。都感觉不是很灵活,只针对一种正则进行限制。留个坑看以后会不会封装吧。。


————————————————
版权声明:本文为CSDN博主「flipped_lv」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/ciichen/article/details/111195345


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM