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

更新時(shí)間：2020年02月06日 11:26:52 作者：西紅柿里沒(méi)有番茄

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

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

試過(guò)很多種方法發(fā)現(xiàn)都不行，因?yàn)椴还苡脩?hù)在input中輸入了什么類(lèi)型的數(shù)據(jù)，我通過(guò)javaScript獲取到這個(gè)值后都會(huì)變成字符，所以我們通常用來(lái)判斷數(shù)據(jù)類(lèi)型的幾個(gè)方法（Number(a)、typeof、instanceof）在這里都是沒(méi)有用的，用這幾個(gè)方法進(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);//通過(guò)表達(dá)式進(jìn)行匹配
 
      if (flag) {
        alert("數(shù)據(jù)類(lèi)型合法");
      } else {
        alert("數(shù)據(jù)類(lèi)型不合法");
      }
 
    }
 
  </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)行判斷返回一個(gè)布爾值

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

額外啰嗦一點(diǎn)

如果我們需要將輸入框中的字符轉(zhuǎn)換成數(shù)字運(yùn)算也可以使用正則去實(shí)現(xiàn)，只要在原來(lái)的代碼中加上下面紅色背景那段代碼就可以將字符轉(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);//通過(guò)表達(dá)式進(jìn)r行匹配
      var fin = num.match(rex);
      if (flag) {
        alert(fin+"：數(shù)據(jù)類(lèi)型合法");
      } else {
        alert("數(shù)據(jù)類(lèi)型不合法");
      }
 
    }
 
  </script>
 
</head>
<body>
 
<input type="text" id="in">
<br>
<button onclick="test(document.getElementById('in').value)">進(jìn)行數(shù)據(jù)判斷</button>
 
</body>
</html>

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

您可能感興趣的文章: