欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2024年03月20日 17:05:53   作者：啥咕啦嗆  
本文主要是記錄,el-input怎么限制輸入只允許輸入浮點(diǎn)型,注意是輸入的時候限制只允許輸入浮點(diǎn)型,而不是輸入完提交的時候再校驗(yàn)提示,感興趣的朋友跟隨小編一起看看吧

前言背景：

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

解決之路：

1.input輸入的限制，在vue中一般考慮 @input  @input.native onkeyup oninput等，當(dāng)然還有@blur,@change。但是我們這邊前提是輸入就只允許輸入浮點(diǎn)型，也就是數(shù)字和小數(shù)點(diǎn)，再多點(diǎn)考慮一個正負(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ù)點(diǎn).和減號－：

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

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

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

如果只用這個也是可以的，但是在輸入中文時，拼音還是會打入到輸入框中

 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ù)字或者 -
},

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

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

相關(guān)文章

  • JavaScript學(xué)習(xí)教程之cookie與webstorage

    JavaScript學(xué)習(xí)教程之cookie與webstorage

    這篇文章主要給大家介紹了關(guān)于JavaScript學(xué)習(xí)教程之cookie與webstorage的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • 用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例

    用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例

    這篇文章主要介紹了用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • uniapp小程序之配置首頁搜索框功能的實(shí)現(xiàn)

    uniapp小程序之配置首頁搜索框功能的實(shí)現(xiàn)

    這篇文章主要介紹了uniapp小程序之配置首頁搜索框,我們介紹一下本次開發(fā)使用的是uniapp，本次分享內(nèi)容的搜索框?yàn)榻馆斎胨阉骺?，點(diǎn)擊跳轉(zhuǎn)專屬搜索頁面，需要的朋友可以參考下
    2022-09-09
  • javascript判斷移動端訪問設(shè)備并解析對應(yīng)CSS的方法

    javascript判斷移動端訪問設(shè)備并解析對應(yīng)CSS的方法

    這篇文章主要介紹了javascript判斷移動端訪問設(shè)備并解析對應(yīng)CSS的方法,涉及移動端設(shè)備的判斷及動態(tài)加載技巧,需要的朋友可以參考下
    2015-02-02
  • javascript數(shù)組遍歷的方法實(shí)例分析

    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)

    mock.js模擬數(shù)據(jù)的實(shí)現(xiàn)

    在沒有后端提供數(shù)據(jù)的情況下,前端人員在自己寫demo或者練手項(xiàng)目的時候可以使用mock.js來模擬數(shù)據(jù),本文主要介紹了mock.js模擬數(shù)據(jù)的實(shí)現(xiàn),感興趣的可以了解一下
    2023-11-11
  • js轉(zhuǎn)化毫秒為時間格式代碼

    js轉(zhuǎn)化毫秒為時間格式代碼

    這篇文章主要介紹了使用js轉(zhuǎn)化毫秒為時間格式的具體實(shí)現(xiàn),需要的朋友可以參考下
    2014-04-04
  • Javascript的console['''']常用輸入方法匯總

    Javascript的console['''']常用輸入方法匯總

    本文給大家?guī)砹耸畮追NJavascript的console['']常用輸入方法，每種方法給大家介紹的都很詳細(xì)，需要的朋友參考下吧
    2018-04-04
  • 前端layui?table表格勾選事件以及常見模塊詳解

    前端layui?table表格勾選事件以及常見模塊詳解

    Layui 是一個非常流行的前端框架,其中的table組件可以幫助您實(shí)現(xiàn)復(fù)選框功能,下面這篇文章主要給大家介紹了關(guān)于前端layui?table表格勾選事件以及常見模塊的相關(guān)資料,需要的朋友可以參考下
    2024-08-08
  • javascript實(shí)現(xiàn)自由編輯圖片代碼詳解

    javascript實(shí)現(xiàn)自由編輯圖片代碼詳解

    這篇文章主要介紹了javascript實(shí)現(xiàn)自由編輯圖片代碼詳解，在當(dāng)下的的前端項(xiàng)目中，圖片功能可以說是非常常見的，圖片的展示、圖片的裁剪編輯、圖片的上傳等，那么我們的項(xiàng)目便來了個需求。,需要的朋友可以參考下
    2019-06-06

最新評論