el-input限制輸入只允許輸入浮點型的解決思路
前言背景：
本文主要是記錄，el-input怎么限制輸入只允許輸入浮點型。注意是輸入的時候限制只允許輸入浮點型，而不是輸入完提交的時候再校驗提示哦！
解決之路：
1.input輸入的限制，在vue中一般考慮 @input @input.native onkeyup oninput等，當(dāng)然還有@blur,@change。但是我們這邊前提是輸入就只允許輸入浮點型，也就是數(shù)字和小數(shù)點，再多點考慮一個正負(fù)號。
2.所以我本次記錄的方法，在針對element-ui中的el-input進(jìn)行限制輸入。采用兩個同時限制。
<el-input type="text" ref="contentInput" v-model="oneData.content"
oninput ="value = value.replace(/[^0-9.-]/g,'')"
@input="handleInput('content')"
@change="changedata"
></el-input>①輸入替換，只允許輸入數(shù)字和小數(shù)點.和減號－：
如果只用這個會輸入的時候能夠輸入多個小數(shù)點，不符合浮點型格式，就算粘貼來的的也要符合
oninput ="value = value.replace(/[^0-9.-]/g,'')"
②校驗格式替換：
如果只用這個也是可以的，但是在輸入中文時，拼音還是會打入到輸入框中
handleInput(name){
this.oneData[name] = this.oneData[name]
.replace(/[^\-\d.]/g, '') //只能輸入 數(shù)字 小數(shù)點 -
.replace(/\-{2,}/g, "-") // 只能出現(xiàn)一次-
.replace(/^0+(\d)/, '$1') //如果第一位是 0 就替換成后面的數(shù)字
.replace(/^\./, '0.') //如果第一位是 . 就 替換成 0.
.match(/^[\d\-]*(\.?\d{0,5})/g)[0] || '' //開頭只能允許數(shù)字或者 -
},在這兩個同時設(shè)置后，就把輸入限制的死死的了，如果您還有別的方法歡迎評論區(qū)交流哈。
到此這篇關(guān)于el-input怎么限制輸入只允許輸入浮點型的文章就介紹到這了,更多相關(guān)el-input限制輸入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
bootstrap制作jsp頁面（根據(jù)值讓table顯示選中）
這篇文章主要為大家詳細(xì)介紹了bootstrap做的jsp頁面,根據(jù)值讓table顯示選中，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
Firefox+FireBug使JQuery的學(xué)習(xí)更加輕松愉快
FireBug是FireFox下最強(qiáng)大的調(diào)試插件.利用它，可以讓JQuery的學(xué)習(xí)過程更加輕松愉快.2010-01-01
基于JavaScript實現(xiàn)在線網(wǎng)頁煙花效果
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實現(xiàn)簡單的在線網(wǎng)頁煙花效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02
純html+css+javascript實現(xiàn)樓層跳躍式的頁面布局（實例代碼）
這篇文章主要介紹了純html+css+javascript實現(xiàn)樓層跳躍式的頁面布局,需要的朋友可以參考下2017-10-10
js對象比較實現(xiàn)代碼。2009-04-04
這篇文章主要介紹了微信小程序 冒泡事件原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
使用JS組件實現(xiàn)帶ToolTip驗證框的實例代碼
這篇文章主要介紹了使用JS組件實現(xiàn)帶ToolTip驗證框的實例代碼,需要的朋友可以參考下2017-08-08
前端TypeScript高級技巧正確做法(讓你的代碼更安全)
TypeScript中豐富的類型系統(tǒng)提供了足夠的靈活性和表達(dá)力,讓用戶可以在保證類型安全的同時編寫出更加優(yōu)雅和高效的代碼,這篇文章主要介紹了前端TypeScript高級技巧正確做法的相關(guān)資料,需要的朋友可以參考下2026-04-04
經(jīng)理交給我一個網(wǎng)站新聞資訊網(wǎng)頁開發(fā)的活兒，對于我這樣的java程序員，沒有接觸過網(wǎng)頁設(shè)計這么高端的東東，該怎么搞呢，去度娘那搜索到不少結(jié)果，而且很大部分都是用jquery做的，于是根據(jù)自己的一些的理解，提供了這篇jquery輪播效果的講解，有需要的朋友可以來參考下2015-08-08
ECharts折線圖的Legend（圖例）用于展示每條折線所對應(yīng)的數(shù)據(jù)系列名稱,下面這篇文章主要給大家介紹了關(guān)于echarts折線圖legend太多與圖重疊的處理辦法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02