el-input限制輸入只允許輸入浮點型的解決思路
更新時間：2024年03月20日 17:05:53 作者：啥咕啦嗆
本文主要是記錄,el-input怎么限制輸入只允許輸入浮點型,注意是輸入的時候限制只允許輸入浮點型,而不是輸入完提交的時候再校驗提示,感興趣的朋友跟隨小編一起看看吧
前言背景：
本文主要是記錄，el-input怎么限制輸入只允許輸入浮點型。注意是輸入的時候限制只允許輸入浮點型，而不是輸入完提交的時候再校驗提示哦！
解決之路：
1.input輸入的限制，在vue中一般考慮 @input @input.native onkeyup oninput等，當(dāng)然還有@blur,@change。但是我們這邊前提是輸入就只允許輸入浮點型，也就是數(shù)字和小數(shù)點，再多點考慮一個正負號。
2.所以我本次記錄的方法，在針對element-ui中的el-input進行限制輸入。采用兩個同時限制。
<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)文章
JavaScript學(xué)習(xí)教程之cookie與webstorage
這篇文章主要給大家介紹了關(guān)于JavaScript學(xué)習(xí)教程之cookie與webstorage的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
用Golang運行JavaScript的實現(xiàn)示例
這篇文章主要介紹了用Golang運行JavaScript的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了uniapp小程序之配置首頁搜索框,我們介紹一下本次開發(fā)使用的是uniapp，本次分享內(nèi)容的搜索框為禁止輸入搜索框，點擊跳轉(zhuǎn)專屬搜索頁面，需要的朋友可以參考下2022-09-09
javascript判斷移動端訪問設(shè)備并解析對應(yīng)CSS的方法
這篇文章主要介紹了javascript判斷移動端訪問設(shè)備并解析對應(yīng)CSS的方法,涉及移動端設(shè)備的判斷及動態(tài)加載技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了javascript數(shù)組遍歷的方法,結(jié)合實例形式分析了javascript數(shù)組遍歷及相關(guān)的some、every、filter、map等方法的使用技巧,需要的朋友可以參考下2016-09-09
在沒有后端提供數(shù)據(jù)的情況下,前端人員在自己寫demo或者練手項目的時候可以使用mock.js來模擬數(shù)據(jù),本文主要介紹了mock.js模擬數(shù)據(jù)的實現(xiàn),感興趣的可以了解一下2023-11-11
這篇文章主要介紹了使用js轉(zhuǎn)化毫秒為時間格式的具體實現(xiàn),需要的朋友可以參考下2014-04-04![Javascript的console['''']常用輸入方法匯總](http://img.jbzj.com/images/xgimg/bcimg7.png)
Javascript的console['''']常用輸入方法匯總
本文給大家?guī)砹耸畮追NJavascript的console['']常用輸入方法，每種方法給大家介紹的都很詳細，需要的朋友參考下吧2018-04-04
Layui 是一個非常流行的前端框架,其中的table組件可以幫助您實現(xiàn)復(fù)選框功能,下面這篇文章主要給大家介紹了關(guān)于前端layui?table表格勾選事件以及常見模塊的相關(guān)資料,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了javascript實現(xiàn)自由編輯圖片代碼詳解，在當(dāng)下的的前端項目中，圖片功能可以說是非常常見的，圖片的展示、圖片的裁剪編輯、圖片的上傳等，那么我們的項目便來了個需求。,需要的朋友可以參考下2019-06-06