isNaN（）を使用したフォーム検証

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

フォーム検証のためのサンプルコードのいくつかを採用しようとしましたが、私のコードでは「間違った入力！ドキュメント上のサンプルコードのように、私はもっと簡単なアプローチをとることに決めました。isNaN（）を使用したフォーム検証

私の目標は、フォームフィールドからの入力が数字（文字/記号なし）かどうかをチェックすることです。そうすればフォームの結果が欲しいものをチェックします。彼らの情報を与えられた）、そうでなければ、それは一般的なエラーメッセージを発してほしい。

ただし、エラーメッセージは、「年齢」、出力は「NaNで」であっても、オフ解雇されません。例えば、ボックス1に文字とボックス2を数字で記入すると、ステージが得られます。（空白）年齢：NaN。私は何が欠けていますか？

編集：実装が変更を提案し、もしチェック条件を変更しました。

出典

2016-10-10 ShadowBlade

あなたが言ったように、あなたは明らかに数字と文字列を計算カント以来、それは数であるかどうかをチェックすることにより、第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)

isNaN(testValue)は、testValueが数値でない場合はtrueを返します。あなたのコードで何をするかは、check1 OR check2が数字でないかどうかをチェックし、そうであれば続行します。私はあなたが望むものをそれとは思わない？ elseはあなたのエラーメッセージであり、両方がfalseの場合のみ呼び出されます（両方とも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ありがとう、私が探していたthats。 – ShadowBlade

@KoalaGangstaええと、今はすべてが整数ではなく、エラーだけをスローします。 – ShadowBlade

isNaN（）を使用したフォーム検証

答えて

関連する問題