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 回答