快捷導(dǎo)航

el-input限制輸入只允許輸入浮點(diǎn)型的解決思路

更新時(shí)間：2024年03月20日 17:05:53 作者：啥咕啦嗆

本文主要是記錄,el-input怎么限制輸入只允許輸入浮點(diǎn)型,注意是輸入的時(shí)候限制只允許輸入浮點(diǎn)型,而不是輸入完提交的時(shí)候再校驗(yàn)提示,感興趣的朋友跟隨小編一起看看吧

前言背景：

本文主要是記錄，el-input怎么限制輸入只允許輸入浮點(diǎn)型。注意是輸入的時(shí)候限制只允許輸入浮點(diǎn)型，而不是輸入完提交的時(shí)候再校驗(yàn)提示哦！

解決之路：

1.input輸入的限制，在vue中一般考慮 @input @input.native onkeyup oninput等，當(dāng)然還有@blur,@change。但是我們這邊前提是輸入就只允許輸入浮點(diǎn)型，也就是數(shù)字和小數(shù)點(diǎn)，再多點(diǎn)考慮一個(gè)正負(fù)號(hào)。

2.所以我本次記錄的方法，在針對(duì)element-ui中的el-input進(jìn)行限制輸入。采用兩個(gè)同時(shí)限制。

<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ù)點(diǎn).和減號(hào)－：

如果只用這個(gè)會(huì)輸入的時(shí)候能夠輸入多個(gè)小數(shù)點(diǎn)，不符合浮點(diǎn)型格式，就算粘貼來(lái)的的也要符合

oninput ="value = value.replace(/[^0-9.-]/g,'')"

②校驗(yàn)格式替換：

如果只用這個(gè)也是可以的，但是在輸入中文時(shí)，拼音還是會(huì)打入到輸入框中

 handleInput(name){
     this.oneData[name] = this.oneData[name]
         .replace(/[^\-\d.]/g, '')  //只能輸入   數(shù)字 小數(shù)點(diǎn) -
         .replace(/\-{2,}/g, "-") // 只能出現(xiàn)一次- 
         .replace(/^0+(\d)/, '$1') //如果第一位是 0 就替換成后面的數(shù)字
         .replace(/^\./, '0.') //如果第一位是 . 就 替換成  0.
         .match(/^[\d\-]*(\.?\d{0,5})/g)[0] || ''  //開頭只能允許數(shù)字或者 -
},

在這兩個(gè)同時(shí)設(shè)置后，就把輸入限制的死死的了，如果您還有別的方法歡迎評(píng)論區(qū)交流哈。

到此這篇關(guān)于el-input怎么限制輸入只允許輸入浮點(diǎn)型的文章就介紹到這了,更多相關(guān)el-input限制輸入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JavaScript學(xué)習(xí)教程之cookie與webstorage
這篇文章主要給大家介紹了關(guān)于JavaScript學(xué)習(xí)教程之cookie與webstorage的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例
這篇文章主要介紹了用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
uniapp小程序之配置首頁(yè)搜索框功能的實(shí)現(xiàn)
這篇文章主要介紹了uniapp小程序之配置首頁(yè)搜索框,我們介紹一下本次開發(fā)使用的是uniapp，本次分享內(nèi)容的搜索框?yàn)榻馆斎胨阉骺?，點(diǎn)擊跳轉(zhuǎn)專屬搜索頁(yè)面，需要的朋友可以參考下
2022-09-09
javascript判斷移動(dòng)端訪問(wèn)設(shè)備并解析對(duì)應(yīng)CSS的方法
這篇文章主要介紹了javascript判斷移動(dòng)端訪問(wèn)設(shè)備并解析對(duì)應(yīng)CSS的方法,涉及移動(dòng)端設(shè)備的判斷及動(dòng)態(tài)加載技巧,需要的朋友可以參考下
2015-02-02
javascript數(shù)組遍歷的方法實(shí)例分析
這篇文章主要介紹了javascript數(shù)組遍歷的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組遍歷及相關(guān)的some、every、filter、map等方法的使用技巧,需要的朋友可以參考下
2016-09-09
mock.js模擬數(shù)據(jù)的實(shí)現(xiàn)
在沒(méi)有后端提供數(shù)據(jù)的情況下,前端人員在自己寫demo或者練手項(xiàng)目的時(shí)候可以使用mock.js來(lái)模擬數(shù)據(jù),本文主要介紹了mock.js模擬數(shù)據(jù)的實(shí)現(xiàn),感興趣的可以了解一下
2023-11-11
js轉(zhuǎn)化毫秒為時(shí)間格式代碼
這篇文章主要介紹了使用js轉(zhuǎn)化毫秒為時(shí)間格式的具體實(shí)現(xiàn),需要的朋友可以參考下
2014-04-04
Javascript的console['''']常用輸入方法匯總
本文給大家?guī)?lái)了十幾種Javascript的console['']常用輸入方法，每種方法給大家介紹的都很詳細(xì)，需要的朋友參考下吧
2018-04-04
前端layui?table表格勾選事件以及常見(jiàn)模塊詳解
Layui 是一個(gè)非常流行的前端框架,其中的table組件可以幫助您實(shí)現(xiàn)復(fù)選框功能,下面這篇文章主要給大家介紹了關(guān)于前端layui?table表格勾選事件以及常見(jiàn)模塊的相關(guān)資料,需要的朋友可以參考下
2024-08-08
javascript實(shí)現(xiàn)自由編輯圖片代碼詳解
這篇文章主要介紹了javascript實(shí)現(xiàn)自由編輯圖片代碼詳解，在當(dāng)下的的前端項(xiàng)目中，圖片功能可以說(shuō)是非常常見(jiàn)的，圖片的展示、圖片的裁剪編輯、圖片的上傳等，那么我們的項(xiàng)目便來(lái)了個(gè)需求。,需要的朋友可以參考下
2019-06-06