我正在用 HTML 和 JS 创建一个示例 MabLibs 类型的东西。当人们在一个字段中输入内容时，它将使用它来创建自己的 MadLib。
我做了一些研究，并没有找到我正在寻找的东西。假设一个人在名称字段中输入了 12。如何编码，所以如果这个实例确实发生，它不会通过并警告“这不是一个有效的输入。请再次输入!”或类似的规定。
我正在使用的代码如下。我对 Javascript 很陌生，所以我知道格式和内容可能是错误的。
<html><head>
<title>
Mad Libs Story
</title>
<script>
function getVars() {
person1 = String(document.getElementById("personOne").value);
age = Number(document.getElementById("ageOne").value);
firstAdjective = String(document.getElementById("adjective").value);
document.getElementById("madLibCreation").innerHTML = "There once was a person named " + person1 + ". She was " + age + " and very " + firstAdjective = ".";
}
</script>
</head>
<body>
<h3>
Welcome to Mad Libs! Please type in the prompted Information. Then press the submit button. Have fun!
</h3>
<p>
Name of Person in Room: <input type="text" id="personOne">
</p>
<p>
Age: <input type="text" id="ageOne">
</p>
<p>
Adjective: <input type="text" id="adjective">
</p>
<input type="submit" value="Get My MadLib Creation!" onclick="getVars();">
<p id="madLibCreation"></p>
</body></html>
最佳答案
为此，您必须检查名称字段值是否为数字。我们可以使用 isNaN 函数检查该值是否为数字。此函数返回真或假。
isNaN(12) // falsee
isNaN(-4.5) // false
isNaN(15-3) // false
isNaN(0) // false
isNaN('123') // false
isNaN('Nuwan') // true
isNaN('2005/12/12') // true
isNaN() // true
因此，在您的代码中 getVars() 函数更改如下
function getVars() {
var name = document.getElementById("personOne").value;
if(!isNaN(name) && name.length != 0){
alert("That is not a valid input. PLease type again!");
}else{
person1 = String(document.getElementById("personOne").value);
age = Number(document.getElementById("ageOne").value);
firstAdjective = String(document.getElementById("adjective").value);
document.getElementById("madLibCreation").innerHTML = "There once was a person named " + person1 + ". She was " + age + " and very " + firstAdjective + ".";
}
}
关于javascript - 防止提交表单后在 JS 中输入错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59482105/