1

我一直在研究 JavaScript 中的一些基本表单验证。目前，我有一个简单的 HTML 表单，它有三个输入字段——两个需要数字输入，一个需要字符串输入。但是，我正在努力实现这一点。

const displayMessage = function (message) {
  document.querySelector(".message").textContent = message;
};

const displayOtherMessage = function (message) {
  document.querySelector(".message1").textContent = message;
};

document.querySelector(".check").addEventListener("click", function () {
  const height = Number(document.querySelector(".height").value);
  const weight = Number(document.querySelector(".weight").value);
  const name = String(document.querySelector(".name").value);
  if (!height && !weight && !name) {
    displayMessage("Please enter a height, a weight and a name.");
  } else if (!height || !weight || !name) {
    displayMessage("Please enter a height, a weight and a name.");
  } else if (height && weight && name) {
    if (
      typeof weight !== "number" ||
      typeof height !== "number" ||
      typeof name !== "string"
    ) {
      displayOtherMessage(
        "Height must be a number, weight must be a number and name must be a string."
      );
    }
    displayMessage("");
    alert(
      `Thank you, ${name}! You said you weigh ${weight} kilograms and are ${height} metres tall.`
    );
  }
});

这是我正在努力解决的问题：

 if (
      typeof weight !== "number" ||
      typeof height !== "number" ||
      typeof name !== "string"
    ) {
      displayOtherMessage(
        "Height must be a number, weight must be a number and name must be a string."
      );
    }

当我尝试在第二个输入字段中提交“John”时，会显示 displayMessage。如何使 displayOtherMessage 改为显示？

这里的 HTML：

https://pastebin.com/E5Pm6Dku

4

2 回答 2

1

您的代码在检查中有点多余。例如，一个<input>值总是一个字符串，所以不需要检查它的类型，只要它不为空。此外，您应该更具体地说明您需要用户做什么（哪个输入不正确）。您可以将其简化为如下所示：

const displayMessage = function (message) {
  document.querySelector(".message").textContent = message;
};

document.querySelector(".check").addEventListener("click", function () {
  let height = document.querySelector(".height").value,
      name = document.querySelector(".name").value,
      weight = document.querySelector(".weight").value;
  
  if (!name) {
    displayMessage("Please enter a name.");
  } else if (!height || isNaN(Number(height))) {
    displayMessage("Height must be a number.");
  } else if (!weight || isNaN(Number(weight))) {
    displayMessage("Weight must be a number.");
  } else {
    displayMessage(`Thank you, ${name}! You said you weigh ${weight} kilograms and are ${height} metres tall.`
    );
  }
});

https://jsfiddle.net/1L5qjg2o/3/

此外，请考虑keyup在您的输入上使用事件来执行这些检查。在我看来，如果您在用户输入它们时进行验证和更正，而不是等到他们提交所有内容然后不得不倒退，那么用户体验会好得多。

于 2021-05-27T10:33:59.457 回答
0

Number()总是返回 anumber并且String()总是返回一个字符串，所以这些typeof检查不会像你希望的那样做任何事情。

如果传递给的字符串Number()是无效数字，它将返回NaN. 所以你可以尝试isNaN(weight)而不是typeof.

顺便说一句，在 Node.js 或浏览器控制台中，您可以直接尝试这种事情，例如：

> var height = Number("john")
> height
NaN
> typeof height
"number"
> isNaN(height)
true

也可以尝试使用您希望有效的值（例如"10"或其他）。

于 2021-05-25T03:02:54.723 回答