在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>
