判斷input輸入的是否是數字

本來想總結下,數字輸入驗證的,卻沒成想,一腳一個坑。。。沒有能根治的方法。。。

不管如何,還是總結下常用的幾種方法吧~~~

html5中表單input,擁有一些新的輸入屬性,極大方便了我們開發過程中的一些表單驗證。但是由於瀏覽器的兼容性,其有存在着一些不完美。

從下圖中,我們可以看到,並不是所有的瀏覽器都支持新的屬性。那麼對於需要兼容火狐或者ie的項目來說,我們需要進行一些拓展。

基於該目標:判斷input輸入的是否是數字(要求兼容firefox,chrome)?我們將在本文中探討一些可以達成目標的方法。
在這裏插入圖片描述
顯然,如果再使用type="number",已然不能適用項目需要。

對此,我們可以用以下幾個方法來進行輸入驗證:

1.使用isNaN() 函數(有一定的侷限性,得根據具體情況決定是否使用該方法);

isNaN() 函數用於檢查其參數是否是非數字值。

這是官方的解釋,它常用於檢測 parseFloat()parseInt() 的結果,以判斷它們表示的是否是合法的數字

isNaN(123); //false
isNaN(-1.23); //false
isNaN(5-2); //false
isNaN(0); //false
isNaN(“Hello”); //true
isNaN(“2005/12/12”); //true

注意:如果是空字符串,isNaN()也會返回false;

let a=’’;
isNaN(a); //false

let a= true;
let b =‘true’;
isNaN(a); // false
isNaN(b); // true

let a=100;
let b =‘100’;
isNaN(a); // false
isNaN(b); // false

在項目中,我們可以拿到input標籤中的value,然後使用isNan(value)進行判斷,如果返回false,則說明,用戶輸入的(大概率)是合法數字。

2.與number類型的數字相加;

let a =0; //a is number
const b ='123';
const c =123;
let res_b = a+b;   //0123
let res_c = a+c;  //123

if(res_b == b){
	//b是數字
}

if(res_c  == c){
	//c是數字
}

該方法應用的是:任何數和0相加,都等於自身

3.使用正則表達式:

這個方法也適用於很多場合。當然了,雖然在html5中,input擁有了pattern這個新屬性,但是由於兼容性,所以,僅能在少量項目中使用到該屬性。但是,如果該方法結合事件綁定,那麼就很好用了!

4.typeof();
在這裏插入圖片描述
5.判斷鍵值,判斷每次輸入的是否是數字;
在這裏插入圖片描述
未完待續~~~

其他:鍵盤與鼠標按鍵的鍵值對照表

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章