vue:el-input輸入時(shí)限制輸入的類型操作

更新時(shí)間：2020年08月05日 09:45:56 作者：webfullstack

這篇文章主要介紹了vue:el-input輸入時(shí)限制輸入的類型操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

通過(guò)@keyup.native的時(shí)間動(dòng)態(tài)監(jiān)控輸入的類型

1.手機(jī)號(hào)碼,只能是數(shù)字,如果輸入了非數(shù)字直接清空

2.身份證號(hào)碼,除了Xx和數(shù)字其余的一律清空

3.基于1.2兩種情況下,還有一種是動(dòng)態(tài)創(chuàng)建的字段(也就是v-for出來(lái)的),解決方法:先使用split形成字段數(shù)組,使用for循環(huán)找到最后一個(gè)點(diǎn)的前面的字段,方便使用$set更新和渲染頁(yè)面

setDelMsicStr(field,type){
   let props
   let len
   let value
   let newphoestr
   let item = this
   if (field) {
    props = field.split('.')
    len = props.length
    for (let i = 0; i < len - 1; i++) {
     item = item[props[i]]
    }
    if(type=="phone"){
     newphoestr = (item[props[len - 1]]).replace(/([^0-9])+/g, '')
    }else if(type=='idCard'){
     newphoestr = (item[props[len - 1]]).replace(/([^0-9Xx])+/g, '')
    }
    this.$set(item, props[len - 1], newphoestr)
   }
  },

重點(diǎn):也是使用this.$set()時(shí)必須的點(diǎn)

    for (let i = 0; i < len - 1; i++) {
     item = item[props[i]]
    }

表格限制輸入的數(shù)字長(zhǎng)度,超過(guò)限定值,直接顯示9999

          <el-form-item prop="activStoreSellPrice">
           <el-input type="number" @keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.activStoreSellPrice',99999,0)" v-model.number="scope.row.activStoreSellPrice" :disabled="disabled" min="0" max="99999999"></el-input>
          </el-form-item>

重點(diǎn)：

表格的需要獲取到行的index(scope.$index)

@keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.activStoreSellPrice',99999,0)"

補(bǔ)充知識(shí)：elementUI + vue 輸入框只能輸入正整數(shù) 不能輸入字母 e 以及+ - 號(hào)

看代碼吧~

<el-input :inline="true" v-model="dialogForm.closeTime" onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" type="number"></el-input>

以上這篇vue:el-input輸入時(shí)限制輸入的類型操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue：左右過(guò)渡展開(kāi)折疊的組件
在網(wǎng)上找了好久關(guān)于左右過(guò)渡動(dòng)畫(huà)折疊的組件,沒(méi)有合適的代碼,效果類似于element UI中的Drawer抽屜組件,只不過(guò)ele中的都是懸浮的組件,工作中遇到的很多都是占用空間的展開(kāi)折疊,網(wǎng)上很多也是上下展開(kāi)收起的組件,于是就自己寫(xiě)了一個(gè),分享給大家,感興趣的朋友參考下吧
2023-11-11
Vue服務(wù)端渲染實(shí)踐之Web應(yīng)用首屏耗時(shí)最優(yōu)化方案
這篇文章主要介紹了Vue服務(wù)端渲染實(shí)踐之Web應(yīng)用首屏耗時(shí)最優(yōu)化方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Vue3中注冊(cè)全局的組件,并在TS中添加全局組件提示方式
這篇文章主要介紹了Vue3中注冊(cè)全局的組件,并在TS中添加全局組件提示方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue開(kāi)發(fā)公共組件之返回頂部
這篇文章主要為大家詳細(xì)介紹了vue開(kāi)發(fā)公共組件之返回頂部，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
vue實(shí)現(xiàn)把頁(yè)面導(dǎo)出成word文件的方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)把頁(yè)面導(dǎo)出成word文件的方法,文中的實(shí)現(xiàn)步驟講解詳細(xì),并且有詳細(xì)的代碼示例,需要的小伙伴可以參考一下
2023-10-10
vue中使用echarts繪制雙Y軸圖表時(shí)刻度沒(méi)有對(duì)齊的兩種解決方法(最新方案)
這篇文章主要介紹了vue中使用echarts繪制雙Y軸圖表時(shí)，刻度沒(méi)有對(duì)齊的兩種解決方法,主要原因是因?yàn)榭潭仍陲@示時(shí)，分割段數(shù)不一樣，導(dǎo)致左右的刻度線不一致，不能重合在一起，下面給大家分享解決方法，需要的朋友可以參考下
2024-03-03
vue使用高德地圖點(diǎn)擊下鉆上浮效果的實(shí)現(xiàn)思路
這篇文章主要介紹了vue使用高德地圖點(diǎn)擊下鉆上浮效果的實(shí)現(xiàn)思路,本文以浙江省為例通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2019-10-10
基于 vue-skeleton-webpack-plugin 的骨架屏實(shí)戰(zhàn)
這篇文章主要介紹了基于 vue-skeleton-webpack-plugin 的骨架屏實(shí)戰(zhàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
vue中,在本地緩存中讀寫(xiě)數(shù)據(jù)的方法
今天小編就為大家分享一篇vue中,在本地緩存中讀寫(xiě)數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
通過(guò)vue-router懶加載解決首次加載時(shí)資源過(guò)多導(dǎo)致的速度緩慢問(wèn)題
這篇文章主要介紹了vue-router懶加載解決首次加載時(shí)資源過(guò)多導(dǎo)致的速度緩慢問(wèn)題,文中單獨(dú)給大家介紹了vue router路由懶加載問(wèn)題，需要的朋友可以參考下
2018-04-04