input輸入框中禁止輸入小數和負數（*只允許輸入正整數 *）

最近在做專案中碰見了這麼個問題，需要輸入數字，但是隻能輸入正整數，在網上找的沒找到自己想要的，所以就自己想了兩個辦法，在這裡跟大家分享一下。（因為是剛畢業，第一次寫部落格，所以有點生疏，請各位大佬擔待一些）

方法一：利用禁止按鍵的方法，主要是依靠禁止按下減號以及小數點來完成的

首先要監聽keyup（鍵盤按下）事件，因為elementUi上面的input元件監聽事件是沒有這個事件的，所以可能會報錯，所以我們需要加個vue事件的修飾符 .native，代表原生事件的意思。

然後我們傳個$event物件進去來獲取原生的DOM（可以簡單理解為觸發事件的本身）

接下來就是在methods中寫這個函數了

具體的意思我已經寫在上面了，按下鍵後，可以自己彈出一下keynum和keychar所代表的的字元或者鍵盤碼，根據哪個判斷都可以，我選擇使用鍵盤碼來判斷進入判斷後我們就可以做互動了，最後我選擇清掉使用者所輸入的資料。

方法二：利用正則表示式來規避掉小數點和負數

在這裡呢使用的就是elementUI的事件了，我們監聽一下失去焦點的時候要觸發事件，同樣的我們要傳入進去$event引數

methods中編寫函式

這裡使用的正則的意思代表的是（針對沒有接觸過正則的同學，會的大佬們看看有什麼錯誤沒）：

首先我們先看開頭的^和結尾的$這裡分別代表匹配字串的開頭以及匹配字串的結尾，而[1-9]是代表的是匹配1-9其中的數字，所以會過濾掉負數和小數，同時要求開頭必須要以1開頭，後面的則是匹配以0-9結尾的數字，而*代表的是0次或多次，也就是不限制結尾的數字，合起來的意思就是：我們匹配從1-9中的某個數開頭，並且以0-9中的某個數結尾的匹配。

最後呢，就是做的判斷了，如果符合我們所定義的正則就不用提示錯誤了，如果不符合呢，就會提示錯誤，同時清空資料

下面這些內容是後追加的：

方法三：利用ES6語法includes來規篩掉 . 和 -

1.獲取到輸入框的值，對輸入框內容進行檢索

var inputText = document.querySelector('#inputText')

 inputText.addEventListener('input',function(){
  if( this.value.includes('.')){
   console.log('不能輸入小數點')
  }else if(this.value.includes('-')){
   console.log('不能輸入負數')
  }else{
   console.log('正常')
  }
 })

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

方法是和方法二一樣的，但是正則表示式則是：/^\d+\.\d$/

附上兩個例項：

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

解釋：

/^d+：以任意一個數字開頭 +：出現一次或多次

\.：第二位為小數點

\d+$ ：以任意一個數字結尾並且出現一次或多次

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

解釋：

/^\-：以 - 號 開頭

\d：第二位肯定是個數字

\.：第三位可能會出現0次或者1次的 .

\d* 以數字 結尾出現0次或多次（這樣就可以如果輸入的單單是-2的話，也能匹配到）

OK分享到此結束，如果我之後還有什麼辦法，再來分享給大家，希望能給大家一個參考，也希望大家多多支援我們！