如何在 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+ 阅读量

启动你的 职业生涯

通过完成课程获得认证

开始
广告