vue中input輸入框,限制只能輸入小數點後倆位

2021-09-27 10:36:56 字數 2300 閱讀 3697

vue中input輸入框,限制只能輸入小數點後倆位

考慮到了**的復用。在input中,設定輸入整數很簡單

"return(/[\d]/.test(string.fromcharcode(event.keycode)))" v-model=

"editform.tbiddingsku" auto-complete=

"off"

>

<

/el-input>

這樣處理就行。但是如果限制為只能輸入小數點後倆位。還要去解決輸入人的破壞性輸入。比如輸入 .22 、 1. 等等。怎麼在輸入框中直接就處理掉。

第一步,新建validation.js

import vue from

'vue'

/**許可權指令**/

const decimal = vue.

directive

('decimal'

,).+'

,'$1'

]//禁止錄入小數點後兩位以上];

for(

var i =

0; i < regstrs.length; i++

)trigger

(input,

'input')}

//新增@blur事件,游標切換之後對數字進行補位

input.

onblur

=function

(e)else

if(v ===

'0')

else

if(v ===

'0.'

)else

if(v ===

'.00'

)elseif(

/^0+\d+\.?\d*.*$/

.test

(v))

elseif(

/^0\.\d$/

.test

(v))

elseif(

!/^\d+\.\d$/

.test

(v))

.+/.

test

(v))

).*$/

,'$1');

}elseif(

/^\d+$/

.test

(v))

elseif(

/^\d+\.$/

.test

(v))

elseif(

/^\d+\.\d$/

.test

(v))

elseif(

/^[^\d]+\d+\.?\d*$/

.test

(v))

elseif(

/\d+/

.test

(v))

elseif(

/^0+\d+\.?\d*$/

.test

(v))

else

} input.value = v;

}trigger

(input,

'input'

)// console.log(input,trigger(input, 'input'));}}

);const

trigger

=(el, type)

=>

export

這個裡面困擾我最長的是。我獲取到了input標籤,就是el. 然後怎麼去新增對應事件。找了好久,原來很簡單

//新增@input事件

input.

onblur

=function

(e)//新增@blur事件,游標切換之後對數字進行補位

input.

onblur

=function

(e)

然後在main.js中加入

import decimal from

'@/api/validation.js'

;

最後就是使用了

"editform.ttheorysku" v-decimal auto-complete=

"off"

>

<

/el-input>

也就是加入 v-decimal 就可以限制輸入框中只能輸入倆位數的數字咯。在這裡注意了,如果你輸入的是 .22 我會預設為 22 ,會認為你前面的. 是不小心輸入的。

以上只是個人的思路,應該還有更好的辦法。當然咯,該輸入框還可以進行擴充套件,你想怎麼定義都行。

input 輸入框限制

只能輸入數字和乙個小數點 function clearnonum obj g,只保留第乙個.清除多餘的 obj.value obj.value.replace replace g,replace obj.value obj.value.replace d d 1 2.3 只能輸入6個小數 親測有用!...

bootstrap中input輸入框限制

輸入中文 數字 英文 輸入數字和字母 輸入大小寫字母 數字 下劃線 只能輸入英文本母和數字,不能輸入中文 只能輸入數字和英文 輸入小寫字母 數字 下劃線 輸入數字和點 輸入中文 輸入數字 輸入英文 除了英文的標點符號以外,其他的都可以中文,英文本母,數字,中文標點 只能輸入數字 小數點也不能輸入 只...

input輸入框數字限制

正規表示式驗證輸入框的內容 單價 只能輸入數字和小數點,且必須數字開頭並大於或者等於1,限制最多三位小數,小數點為最後一位時,失去焦點時自動截掉 text value name price onkeyup validatenum1 this onblur todecimal this placeho...