快捷導(dǎo)航

JavaScript如何判斷input數(shù)據(jù)類型

更新時間：2020年02月06日 11:26:52 作者：西紅柿里沒有番茄

這篇文章主要介紹了JavaScript如何判斷input數(shù)據(jù)類型,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

在HTML中接收用戶輸入信息一般都會用到<input/>。我今天本來想實現(xiàn)一個功能：由用戶在input中輸入自己的年齡，然后根據(jù)不同的年齡段彈出不同的信息，為了讓程序更加嚴(yán)謹(jǐn)，我得判斷從input中獲取到的值必須是數(shù)字（這個問題其實可以直接限制input的輸入內(nèi)容為數(shù)字，在這里我想要實現(xiàn)通過javascript判斷input里的值是否是數(shù)字）?！　?/p>

試過很多種方法發(fā)現(xiàn)都不行，因為不管用戶在input中輸入了什么類型的數(shù)據(jù)，我通過javaScript獲取到這個值后都會變成字符，所以我們通常用來判斷數(shù)據(jù)類型的幾個方法（Number(a)、typeof、instanceof）在這里都是沒有用的，用這幾個方法進(jìn)行判斷得到的結(jié)果一定是false。

試了很多種方法后我發(fā)現(xiàn)用正則表達(dá)式進(jìn)行判斷很方便，在這里了記錄一下：

源代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
 
  <script defer>
 
    function test(num) {
//      判斷一串字符是不是全部是數(shù)字
      var rex = /^[0-9]+$/;//正則表達(dá)式
      var flag = rex.test(num);//通過表達(dá)式進(jìn)行匹配
 
      if (flag) {
        alert("數(shù)據(jù)類型合法");
      } else {
        alert("數(shù)據(jù)類型不合法");
      }
 
    }
 
  </script>
 
</head>
<body>
 
<input type="text" id="in">
<br>
<button onclick="test(document.getElementById('in').value)">進(jìn)行數(shù)據(jù)判斷</button>
 
</body>
</html>

先獲取input中的值，再用正則表達(dá)式進(jìn)行判斷返回一個布爾值

可以看效果是實現(xiàn)了的：

額外啰嗦一點

如果我們需要將輸入框中的字符轉(zhuǎn)換成數(shù)字運算也可以使用正則去實現(xiàn)，只要在原來的代碼中加上下面紅色背景那段代碼就可以將字符轉(zhuǎn)換成數(shù)字了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
 
  <script defer>
 
    function test(num) {
//      判斷一串字符是不是全部是數(shù)字
      var rex = /^[0-9]+$/;//正則表達(dá)式
      var flag = rex.test(num);//通過表達(dá)式進(jìn)r行匹配
      var fin = num.match(rex);
      if (flag) {
        alert(fin+"：數(shù)據(jù)類型合法");
      } else {
        alert("數(shù)據(jù)類型不合法");
      }
 
    }
 
  </script>
 
</head>
<body>
 
<input type="text" id="in">
<br>
<button onclick="test(document.getElementById('in').value)">進(jìn)行數(shù)據(jù)判斷</button>
 
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: