input輸入框中禁止輸入小數(shù)和負(fù)數(shù)（*只允許輸入正整數(shù) *）

最近在做項(xiàng)目中碰見(jiàn)了這么個(gè)問(wèn)題，需要輸入數(shù)字，但是只能輸入正整數(shù)，在網(wǎng)上找的沒(méi)找到自己想要的，所以就自己想了兩個(gè)辦法，在這里跟大家分享一下。（因?yàn)槭莿偖厴I(yè)，第一次寫(xiě)博客，所以有點(diǎn)生疏，請(qǐng)各位大佬擔(dān)待一些）

方法一：利用禁止按鍵的方法，主要是依靠禁止按下減號(hào)以及小數(shù)點(diǎn)來(lái)完成的

首先要監(jiān)聽(tīng)keyup（鍵盤(pán)按下）事件，因?yàn)閑lementUi上面的input組件監(jiān)聽(tīng)事件是沒(méi)有這個(gè)事件的，所以可能會(huì)報(bào)錯(cuò)，所以我們需要加個(gè)vue事件的修飾符 .native，代表原生事件的意思。

然后我們傳個(gè)$event對(duì)象進(jìn)去來(lái)獲取原生的DOM（可以簡(jiǎn)單理解為觸發(fā)事件的本身）

接下來(lái)就是在methods中寫(xiě)這個(gè)函數(shù)了

具體的意思我已經(jīng)寫(xiě)在上面了，按下鍵后，可以自己彈出一下keynum和keychar所代表的的字符或者鍵盤(pán)碼，根據(jù)哪個(gè)判斷都可以，我選擇使用鍵盤(pán)碼來(lái)判斷進(jìn)入判斷后我們就可以做交互了，最后我選擇清掉用戶所輸入的數(shù)據(jù)。

方法二：利用正則表達(dá)式來(lái)規(guī)避掉小數(shù)點(diǎn)和負(fù)數(shù)

在這里呢使用的就是elementUI的事件了，我們監(jiān)聽(tīng)一下失去焦點(diǎn)的時(shí)候要觸發(fā)事件，同樣的我們要傳入進(jìn)去$event參數(shù)

methods中編寫(xiě)函數(shù)

這里使用的正則的意思代表的是（針對(duì)沒(méi)有接觸過(guò)正則的同學(xué)，會(huì)的大佬們看看有什么錯(cuò)誤沒(méi)）：

首先我們先看開(kāi)頭的^和結(jié)尾的$這里分別代表匹配字符串的開(kāi)頭以及匹配字符串的結(jié)尾，而[1-9]是代表的是匹配1-9其中的數(shù)字，所以會(huì)過(guò)濾掉負(fù)數(shù)和小數(shù)，同時(shí)要求開(kāi)頭必須要以1開(kāi)頭，后面的則是匹配以0-9結(jié)尾的數(shù)字，而*代表的是0次或多次，也就是不限制結(jié)尾的數(shù)字，合起來(lái)的意思就是：我們匹配從1-9中的某個(gè)數(shù)開(kāi)頭，并且以0-9中的某個(gè)數(shù)結(jié)尾的匹配。

最后呢，就是做的判斷了，如果符合我們所定義的正則就不用提示錯(cuò)誤了，如果不符合呢，就會(huì)提示錯(cuò)誤，同時(shí)清空數(shù)據(jù)

下面這些內(nèi)容是后追加的：

方法三：利用ES6語(yǔ)法includes來(lái)規(guī)篩掉 . 和 -

1.獲取到輸入框的值，對(duì)輸入框內(nèi)容進(jìn)行檢索

var inputText = document.querySelector(’#inputText’) inputText.addEventListener(’input’, function(){ if( this.value.includes(’.’)){ console.log(’不能輸入小數(shù)點(diǎn)’) }else if(this.value.includes(’-’)){ console.log(’不能輸入負(fù)數(shù)’) }else{ console.log(’正常’) } })

方法四：利用正則匹配出 . 或者 -

方法是和方法二一樣的，但是正則表達(dá)式則是：/^d+.d$/

附上兩個(gè)實(shí)例：

let regx = /^d+.d+$/;let num_two = 1.252;const newNum_two = regx.test(num_two)console.log(newNum_two)

解釋?zhuān)?/b>

/^d+：以任意一個(gè)數(shù)字開(kāi)頭 +：出現(xiàn)一次或多次

.：第二位為小數(shù)點(diǎn)

d+$ ：以任意一個(gè)數(shù)字結(jié)尾并且出現(xiàn)一次或多次

let regx_two = /^-d.?d*$/;let num_three = -2.53;const newNum_three = regx_two.test(num_three)console.log(newNum_three)

解釋?zhuān)?/b>

/^-：以 - 號(hào) 開(kāi)頭

d：第二位肯定是個(gè)數(shù)字

.：第三位可能會(huì)出現(xiàn)0次或者1次的 .

d* 以數(shù)字 結(jié)尾出現(xiàn)0次或多次（這樣就可以如果輸入的單單是-2的話，也能匹配到）

OK分享到此結(jié)束，如果我之后還有什么辦法，再來(lái)分享給大家，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)！