时间戳

首页 > 解决方案 > 如何确保用户输入的数据是 JavaScript 中的特定数据类型？

javascript - 如何确保用户输入的数据是 JavaScript 中的特定数据类型？

问题描述

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

标签： javascriptformsvalidationhtml5-formvalidation

解决方案

您的代码在检查中有点多余。例如，一个<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在您的输入上使用事件来执行这些检查。在我看来，如果您在用户输入它们时进行验证和更正，而不是等到他们提交所有内容然后不得不倒退，那么用户体验会好得多。

推荐阅读