重點-有效- 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