elementUI el-input 只能輸入正整數(shù)驗(yàn)證的操作方法
字母e在js中屬于數(shù)字,但是正則匹配 \d 是攔不住字母e 的
正確寫(xiě)法為:
onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
<el-input type="number" placeholder="請(qǐng)輸入" min="1" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.number="count"></el-input>
其他寫(xiě)法:
// 只允許輸入數(shù)字
<el-input type="number" placeholder="請(qǐng)輸入" min="1" oninput ="value=value.replace(/[^\d]/g,'')" v-model.number="count"></el-input>
同理,只允許輸入數(shù)字和小數(shù)
oninput ="value=value.replace(/[^0-9.]/g,'')"
允許輸入小數(shù)點(diǎn)后幾位:
// 保留一位小數(shù) oninput="if(isNaN(value)) { value = parseFloat(value) } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}" // 若需要保留N位小數(shù),則把2 改為 1 + n即可
設(shè)置范圍,最大值,最小值,監(jiān)聽(tīng)input 及 change事件
<el-input min="0" max="100" type="number" @input="numberChange($event, 100)" @change="numberChange($event, 100)" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.number="count"></el-input>
numberChange (val, max) { this.$nextTick(() => { this.count = Math.min(parseInt(val), max) }) }
<el-input >正數(shù)校驗(yàn) 小數(shù)校驗(yàn)
1.正數(shù),不能輸入小數(shù)和小數(shù)點(diǎn),只能輸入 正整數(shù),大于0的
<el-form-item label="安全庫(kù)存:" prop="safeQty" class="meter_one" style="margin-top: 10px"> ? ? ? ? ? <el-input ? ? ? ? ? ? v-model="form.safeQty" ? ? ? ? ? ? type="number" ? ? ? ? ? ? min="0" ? ? ? ? ? ? @input="form.safeQty=form.safeQty.replace(/^(0+)|[^\d]+/g,'')" ? ? ? ? ? ? placeholder="請(qǐng)輸入安全庫(kù)存"/> ? ? ? ? </el-form-item>
2.小數(shù)點(diǎn)保留4位
?<el-form-item label="凈重KG:" prop="netWeight" class="meter_one" style="margin-top: 10px"> ? ? ? ? ? <el-input ? ? ? ? ? ? v-model="form.netWeight" ? ? ? ? ? ? type="number" ? ? ? ? ? ? placeholder="請(qǐng)輸入凈重KG" ? ? ? ? ? ? oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+5)}" ? ? ? ? ? /> ? ? ? ? </el-form-item>
到此這篇關(guān)于elementUI el-input 只能輸入正整數(shù)驗(yàn)證的文章就介紹到這了,更多相關(guān)elementUI el-input輸入驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3項(xiàng)目中預(yù)覽并打印PDF的兩種方法
最近在項(xiàng)目開(kāi)發(fā)中碰到一個(gè)需求是在頁(yè)面中展示pdf預(yù)覽功能,下面這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目中預(yù)覽并打印PDF的兩種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05Vue實(shí)現(xiàn)監(jiān)聽(tīng)某個(gè)元素滾動(dòng),親測(cè)有效
這篇文章主要介紹了Vue實(shí)現(xiàn)監(jiān)聽(tīng)某個(gè)元素滾動(dòng),親測(cè)有效!具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07vue 實(shí)現(xiàn)axios攔截、頁(yè)面跳轉(zhuǎn)和token 驗(yàn)證
這篇文章主要介紹了vue 實(shí)現(xiàn)axios攔截、頁(yè)面跳轉(zhuǎn)和token 驗(yàn)證,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07Vue?前端路由工作原理hash與history的區(qū)別
這篇文章主要介紹了Vue?前端路由工作原理hash與history的區(qū)別,文章圍繞主題展開(kāi)vue-router的工作原理的簡(jiǎn)單介紹,感興趣的朋友可以學(xué)習(xí)一下2022-07-07Elementui如何限制el-input框輸入小數(shù)點(diǎn)
這篇文章主要介紹了Elementui如何限制el-input框輸入小數(shù)點(diǎn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問(wèn)題
這篇文章主要介紹了VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06