首页 > 解决方案 > Number.isNaN 不适用于输入验证

问题描述

我有个问题。

input当用户输入不是数字的内容时,我想显示一条警报“你有问题” 。

function function1() {
  var x = document.getElementById("number1").value;
  if (Number.isNaN(x)) {
    alert("you have a problem");
  }

}
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mohsen Yeganeh</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <input type="text" id="number1">
  <button type="submit" onclick="function1()">click me</button>


</body>

</html>

但是,它不起作用。它哪里出错了?

标签: javascripthtmlcssfunctionnumbers

解决方案


Number.isNaN()检查参数是否为NaN而不是是否为数字。

Number.isNaN(NaN) // true
Number.isNaN("Hello World!") // false, "Hello World!" != NaN

您应该isNaN()改为使用它来检查参数是否为数字:

function function1() {
  var x = document.getElementById("number1").value;
  if (isNaN(x)) {
    alert("you have a problem");
  }
}
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mohsen Yeganeh</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <input type="text" id="number1">
  <button type="submit" onclick="function1()">click me</button>


</body>

</html>


推荐阅读