我一直在用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
2条答案
按热度按时间xzlaal3s1#
Number()总是返回一个number，而String()总是返回一个字符串，所以那些typeof检查并不像您所希望的那样。如果传递给
Number()的字符串是一个 invalid 数字，它将返回NaN。因此，您可以尝试isNaN(weight)而不是typeof。顺便说一句，在Node.js或浏览器控制台中，您可以直接试验这类事情，如do：
也可以尝试使用一个您希望有效的值（如
"10"或其他值）。j13ufse22#
你的代码在检查方面有点多余。比如，
<input>值总是字符串，所以不需要检查它的类型，只需要检查它不是空的。另外，你应该更具体地说明你需要你的用户做什么（哪个输入是不正确的）。你可以把它简化成这样：https://jsfiddle.net/1L5qjg2o/3/
另外，考虑使用
keyup事件对输入进行检查。在我看来，如果在用户输入时进行验证和更正，而不是等到最后提交所有内容时再返回，用户体验会更好。