表单验证（）

<!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>

我试着“采用”一些示例代码进行表单验证，我的代码拒绝给我一个说“错误输入！”的东西的小泡泡。就像文档中的示例代码一样，所以我决定采用更简单的方法。表单验证（）

我的目标是检查表单域的输入是否是数字（没有字母/符号），所以即时做一个if检查以做我想要的表单结果（输出该人的阶段/年龄给他们的信息），否则我只是想让它发出一个通用的错误消息。

但是，即使“年龄”输出为“NaN”，也不会触发错误消息。例如在box1中填入一个字母，在box2中填入一个数字，就可以得到阶段:(空白）年龄：NaN。我错过了什么？

编辑：实施建议更改，如果检查条件发生更改。

来源

2016-10-10 ShadowBlade

正如你所说，你必须首先验证输入是否是数字，因为你不能用数字计算字符串。

看看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)

isNaN(testValue)返回true，如果测试值不是一个数字。所以你在你的代码中做的是，你检查check1或check2是不是一个数字，如果是的话，你继续。我不认为这是你想要的？因为在其他地方是你的错误信息，并且这只在两者都是假时才被调用（意味着它们都不是NaN的，这意味着当所有的都是正确的时候你写错误）

正确你应该问：使用IsNaN时：

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

来源

2016-10-10 17:44:09 KoalaGangsta

用户输入将是一个字符串，所以可能使用'inputValue.match（ “^ [0-9] + $”）长度== 1'会更好;） –

@KoalaGangsta谢谢你，那就是我一直在寻找的。 – ShadowBlade

@KoalaGangsta嗯，现在它把所有东西看作不是一个整数，只会抛出错误。 – ShadowBlade

表单验证（）

回答

相关问题