如何在 JavaScript 中驗證十進位制數？

在本教程中，我們將學習如何在 JavaScript 中驗證十進位制數。

包含小數點 (.) 的數字稱為十進位制數。介於兩個整數之間的數字稱為十進位制數。我們在計算、進度條、接受表單輸入等中使用十進位制數。

正則表示式是用於驗證目的的知名實體。正則表示式是具有特定含義的字元搜尋模式，用於驗證資料。它可以用於任何字串或數字。我們將在 JavaScript 中將其用於驗證目的。

我們使用 if 語句的簡單邏輯來驗證 JavaScript 中的十進位制數。我們在 if 語句中使用了 indexOf() 方法來驗證資料。因此，讓我們看看如何在 JavaScript 中驗證十進位制數。

以下是我們在 JavaScript 中驗證十進位制數使用的方法

  • 使用 match() 方法
  • 使用正則表示式

使用 match() 方法驗證十進位制數

要驗證 JavaScript 中的十進位制數，請使用 match() 方法。它在將字串與正則表示式匹配時檢索匹配項。

語法

str.match( re );

這裡 str 是字串形式的數字，re 是用於驗證字串 str 中數字的正則表示式。

示例

您可以嘗試執行以下程式碼來驗證十進位制數。

<html>
<body>
   <script>
      var str = "1.5";
      var re = /^[-+]?[0-9]+\.[0-9]+$/;
      var found = str.match( re );
      document.write("decimal" );
  </script>
</body>
</html>

使用正則表示式驗證十進位制數

正則表示式是驗證資料的字元模式。它們是模式和修飾符的配對。模式包含它們要搜尋的字元或字元範圍，並用反斜槓 (/) 括起來。修飾符指定搜尋行為；它可能是忽略匹配大小寫或多行字串。

語法

我們可以按照以下語法使用正則表示式來驗證 JavaScript 中的十進位制數：

var decimal= <Decimal number here>;
var regex= /^[-+]?[0-9]+\.[0-9]+$/;
var isValidated=decimal.test(regex);

引數

  • [-+] - 查詢括號內的任何字元。

  • [0-9] - 表示 0 到 9 的範圍。

  • ^ - 從字串開頭匹配表示式。它匹配任何字元。

  • ? - 使其他表示式可選。

  • $ - 從末尾匹配字串。

  • . - 查詢單個字元。

  • test() - 將字串與表示式匹配並返回布林值。

示例

在示例中，我們使用了正則表示式來檢查使用者輸入的數字是否為十進位制數。

<html>
<head>
   <style>
      #Number,
      #para {
         color: red;
      }
   </style>
</head>
<body>
   <h2>Using <i>regular expression</i> to validate decimal numbers</h2>
   <label for = "Number"> Decimal Number:</label>
   <input type = "number" id = "Number" value = "0.0"/>
   <button id = "btn">submit</button>
   <p id = "para"></p>
   <script>
      document.getElementById("btn").addEventListener("click", regularexp);
      function regularexp() {
         var value = document.getElementById("Number").value;
         var regex = /^[-+]?[0-9]+\.[0-9]+$/;
         var isValidated = regex.test(value);
         if (isValidated) {
            document.getElementById("para").innerHTML = "Given number is a decimal number";
         } else {
            document.getElementById("para").innerHTML = "Given number is not a decimal number";
         }
      }
   </script>
</body>
</html>

在上面的示例中，使用者可以看到我們使用了正則表示式來驗證 JavaScript 中的十進位制數。

使用 if-else 語句驗證十進位制數

JavaScript 中有條件語句，例如 if 或 if-else 語句。這些語句包含一個程式碼塊，如果指定條件變為真，則執行該程式碼塊；否則，將執行 false 語句。

我們使用了 indexOf() 方法來檢查數字中是否存在小數點。如果存在，它不應該在第一位。

使用者可以按照以下語法使用正則表示式來驗證十進位制數。

語法

var number = ;
var array=number.split('');
if(array.indexOf(".") >= 0){
   //The number is a decimal number
}
else{
   //The number is not a decimal number
}

您可以按照上述語法驗證十進位制數。

示例

在下面的示例中，我們使用了 indexOf() 方法作為 if 語句的條件。以下程式檢查程式是否包含兩個十進位制數。我們將數字轉換為數字陣列並搜尋小數點，它應該存在於陣列索引大於 0 的數字中。

<html>
<head>
   <style>
      #Number,
      #para {
         color: green;
      }
   </style>
</head>
<body>
   <h2>Using <i>if statement</i> to validate decimal numbers</h2>
   <label for = "Number">Decimal Number:</label>
   <input type = "number" id = "Number" value = "0.0" />
   <button id = "btn">submit </button>
   <p id="para"></p>
   <script>
      document.getElementById("btn").addEventListener("click", regularexp);
      function regularexp() {
         var number = document.getElementById("Number").value;
         var array=number.split('');
         if(array.indexOf(".") >= 0){
            document.getElementById("para").innerHTML = "Decimal Number";
         }
         else{
            document.getElementById("para").innerHTML = "NOT Decimal Number";
         }
      }
   </script>
</body>
</html>

在上面的示例中，使用者可以看到我們檢查了數字並對其進行了驗證。數字在小數點後只能有兩個數字。

在本教程中，我們學習了在 JavaScript 中驗證十進位制數的不同方法。

更新於: 2022-10-31

12K+ 閱讀量

啟動你的 職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.