JS 判断输入框是否为数字|极客笔记

JS 判断输入框是否为数字

在Web开发中经常会遇到需要判断用户输入是否为数字的情况，例如在表单验证、计算或其他逻辑中。本文将介绍如何使用JavaScript来判断输入框中的值是否为数字。

判断输入框中的值是否为数字

在JavaScript中，我们可以通过一些方法来判断用户输入的值是否为数字。以下是一些常用的方法：

1. 使用isNaN()函数

isNaN()函数用来判断一个值是否为NaN（Not a Number）。当输入框中的值为非数字时，会返回true；如果为数字，则返回false。

function checkNumber(input) {
  return isNaN(input);
}

2. 使用正则表达式

我们还可以使用正则表达式来判断输入框中的值是否为数字。下面是一个示例代码：

function checkNumber(input) {
  var pattern = /^\d+$/;
  return pattern.test(input);
}

示例代码

下面是一个完整的示例代码，演示了如何通过JavaScript来判断输入框中的值是否为数字，并在页面上显示结果：

<!DOCTYPE html>
<html>
<head>
  <title>Check if input is number</title>
</head>
<body>
  <input type="text" id="inputBox">
  <button onclick="checkInput()">Check</button>
  <p id="result"></p>

  <script>
    function checkNumber(input) {
      var pattern = /^\d+$/;
      return pattern.test(input);
    }

    function checkInput() {
      var input = document.getElementById('inputBox').value;
      var result = document.getElementById('result');

      if (checkNumber(input)) {
        result.textContent = 'Input is a number';
      } else {
        result.textContent = 'Input is not a number';
      }
    }
  </script>
</body>
</html>

在上面的示例代码中，用户可以在输入框中输入任意值，然后点击按钮进行检查。检查结果会显示在页面上。