时间戳

首页 > 解决方案 > 防止提交表单后在 JS 中输入错误

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

问题描述

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

标签： javascript

解决方案

为此，您必须检查名称字段值是否为数字。我们可以使用 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 + ".";
        }
    }

推荐阅读