gpt4 book ai didi

javascript - 防止提交表单后在 JS 中输入错误

转载 作者:行者123 更新时间:2023-12-04 00:58:32 24 4
gpt4 key购买 nike

我正在用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com