JavaScript如何判斷input資料型別
阿新 • • 發佈：2020-02-07
這篇文章主要介紹了JavaScript如何判斷input資料型別,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
在HTML中接收使用者輸入資訊一般都會用到<input/>。我今天本來想實現一個功能：由使用者在input中輸入自己的年齡，然後根據不同的年齡段彈出不同的資訊，為了讓程式更加嚴謹，我得判斷從input中獲取到的值必須是數字（這個問題其實可以直接限制input的輸入內容為數字，在這裡我想要實現通過javascript判斷input裡的值是否是數字）。
試過很多種方法發現都不行，因為不管使用者在input中輸入了什麼型別的資料，我通過javaScript獲取到這個值後都會變成字元，所以我們通常用來判斷資料型別的幾個方法（Number(a)、typeof、instanceof）在這裡都是沒有用的，用這幾個方法進行判斷得到的結果一定是false。
試了很多種方法後我發現用正則表示式進行判斷很方便，在這裡了記錄一下：
原始碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script defer>
function test(num) {
// 判斷一串字元是不是全部是數字
var rex = /^[0-9]+$/;//正則表示式
var flag = rex.test(num);//通過表示式進行匹配
if (flag) {
alert("資料型別合法");
} else {
alert("資料型別不合法");
}
}
</script>
</head>
<body>
<input type="text" id="in">
<br>
<button onclick="test(document.getElementById('in').value)">進行資料判斷</button>
</body>
</html>先獲取input中的值，再用正則表示式進行判斷返回一個布林值
可以看效果是實現了的：
額外囉嗦一點
如果我們需要將輸入框中的字元轉換成數字運算也可以使用正則去實現，只要在原來的程式碼中加上下面紅色背景那段程式碼就可以將字元轉換成數字了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script defer>
function test(num) {
// 判斷一串字元是不是全部是數字
var rex = /^[0-9]+$/;//正則表示式
var flag = rex.test(num);//通過表示式進r行匹配
var fin = num.match(rex);
if (flag) {
alert(fin+"：資料型別合法");
} else {
alert("資料型別不合法");
}
}
</script>
</head>
<body>
<input type="text" id="in">
<br>
<button onclick="test(document.getElementById('in').value)">進行資料判斷</button>
</body>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。