如何確保用戶輸入的數據是 JavaScript 中的特定數據類型？

Question

我一直在 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

Answer 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事件來執行這些檢查。 在我看來，如果您在用戶輸入它們時進行驗證和更正，而不是等到最后他們 go 提交所有內容然后必須向后 go 提交，這是一個更好的用戶體驗。

Answer 2

Number()總是返回一個number ，而String()總是返回一個字符串，所以這些typeof檢查不會像您希望的那樣做任何事情。

如果傳遞給Number()的字符串是無效數字，它將返回NaN 。 所以你可以嘗試isNaN(weight)而不是typeof 。

順便說一句，在 Node.js 或瀏覽器控制台中，你可以直接試驗這種東西，比如：

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

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