Question

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">

  </head>
  <body>
      <div class="basic">
        <form id="input">
            <p id="content">
              <label> Birth Year: <input type="text" id="box1" placeholder="E.g. 1020" ></label> <br></br>
              <!-- oninvalid="this.setCustomValidity('Please enter a number.')" -->
              <label> Current Year: <input type="text" id="box2" placeholder="E.g. 1220" ></label> <br></br>
              <input type="button" value="Calculate" id="submit" onclick="calculateAge(document.getElementById('box1').value, document.getElementById('box2'.value))"/>
            </p>
           </form>
      </div>

      <script type="text/javascript">
        //previous attempt at form validation and bubble error message.
        //error message for form fields
        var birth = document.getElementById('box1');
        birth.oninvalid = function(event)
        {
        event.target.setCustomValidity('Please enter a number.');
        }
        var current = document.getElementById('box2');
        current.oninvalid = function(e)
        {
          e.target.setCustomValidity('Please enter a number.');
        }

        //function parameters do not have types?
        function calculateAge(birthYear, currentYear)
        {
          var a = birthYear.match("^[0-9]+$").length == 1;
          var b = currentYear.match("^[0-9]+$").length == 1;
          //var check1 = Number.isInteger(birthYear);
          //var check2 = Number.isInteger(currentYear);
          var page = document.getElementById("content");
          // fire off an error message if one of the two fields is NaN.
          if (a ==true && b==true)
          {
            //var page = document.getElementById("content");
            var content = page.innerHTML;
            var age = currentYear-birthYear;
            var stage;
            if (age <18)
            {
              stage = "Teenager";
            }
            else if (age >= 18 || age <= 35)
            {
              stage = "Adult";
            }
            else
            {
              stage = "Mature Adult";
            }
            // \n not working at all...why?
            var outputMessage = "Your stage is: " + stage + ".\n" + "Your age is: " + age + "." + '\n';
            var node = document.createTextNode(outputMessage);
            page.insertBefore(node, page.firstChild);
          }
          else
          {
            var outputMessage = "Error: please enter a number.";
            var node = document.createTextNode(outputMessage);
            page.insertBefore(node, page.firstChild);
          }
        }
        var button = document.getElementById("submit");
        button.onclick = function()
        {
          value1 = button.form.box1.value;
          value2 = button.form.box2.value;
          calculateAge(value1, value2);
        }
      </script>
  </body>
</html>

我试过＆＃34;采用＆＃34;一些用于表单验证的示例代码和我的代码拒绝给我一个小小的泡沫，它说的是错误输入的内容！＆＃34;就像文档中的示例代码一样，所以我决定采用更简单的方法。

我的目标是检查表单字段中的输入是否为数字（没有字母/符号），所以即时检查以执行我希望表单结果执行的操作（输出给定人员的阶段/年龄）他们的信息），否则我只是希望它触发一般错误信息。

但是，即使＆＃34; age＆＃34;也不会触发错误消息。输出是＆＃34; NaN＆＃34;。例如，用一个字母填写box1，用一个数字填充框2，你得到阶段:(空白）年龄：NaN。我错过了什么？

编辑：实施建议的更改，并在检查条件时更改。

Answer 1

正如你所说，你必须首先通过检查它是否是一个数字来验证输入，因为你不能显然用数字来计算字符串。

看看Number.isInteger(value)，这就是你需要的。 ;）

此处概述了其输出：

Number.isInteger(0);         // true
Number.isInteger(1);         // true
Number.isInteger(-100000);   // true

Number.isInteger(0.1);       // false
Number.isInteger(Math.PI);   // false

Number.isInteger(Infinity);  // false
Number.isInteger(-Infinity); // false
Number.isInteger("10");      // false
Number.isInteger(true);      // false
Number.isInteger(false);     // false
Number.isInteger([1]);       // false

修改：[添加] 你的代码也错了。

// fire off an error message if one of the two fields is NaN.
if (check1 ==true || check2==true)

如果testValue不是数字，则

isNaN(testValue)返回true。那么你在代码中做的是，你检查check1或check2是不是一个数字，如果是，你继续。我不认为那是你想要的吗？因为在else中是你的错误信息，并且只有当两者都是假时才会调用它（这意味着它们都必须不是NaN，这意味着你完全写错误然后一切都是正确的）

在使用IsNaN时，你应该问一下：

if(check1 == false && check2 == false) {
  // Everything okay - No error
} else {
  // One of them, or both, is not a number - Print error
}

使用isNaN（）进行表单验证

1 个答案: