JavaScriptによるフォーム検証

-1

フォームの入力を検証しようとしていますが、検証が機能していません。
文字列は少なくとも1文字または数字でなければなりません
整数は0〜11の間で、少なくとも1つの果物を選ぶ必要があります。
入力を入力しなくても、
これはinput_ok.htmlファイルに移動するだけです。
エラーウィンドウがポップアップする必要があります。ここでJavaScriptによるフォーム検証

が私のコードです：

function validateInput() { 
    var str = myForm.inputString.value; 
    var nbrStr = myForm.inputInteger.value; 
    var nbr = parseInt(nbrStr); 
    var fruit = myForm.fruit.value; 
    if (str != "" && nbrStr != "" && fruit != "" && !isNaN(nbr) && nbr < 11) { 
     return true; 
    } else { 
     var msg = ""; 
     var strError = false; 
     if (str == "") { 
      msg += "\nPlease enter a string with at least one letter or digit"; 
      strError = true; 
     } 
     if (nbrStr == "") { 
      msg += "\nPlease enter an integer in the range 0-11"; 
     } else if (isNaN(nbr)) { 
      msg += "\nPlease enter an integer"; 
     } else if (nbr > 11) { 
      msg += "\nPlease enter an integer less than 11"; 
     } 
     if (strError) { 
      myForm.inputString.focus(); 
     } else { 
      myForm.inputInteger.focus(); 
     } 
     alert(msg); 
    } 
    return false; 
}

<body> 
    <h1>Week 08, Exercise 01</h1> 
    <form action="week08_01servlet" 
      method="post" 
      name="myForm" 
      onsubmit="return validateInput();"> 
     <p>Please enter the following information, 
     and then click the submit button.</p> 
     <p class="indent">A string with at least one letter or digit 
      <input type="text" name="inputString"> 
      <br>An integer in the range 0-11 
      <input type="text" name="inputInteger"> 
      <br>Pick a fruit <select name="fruit"> 
       <option value="---">--- 
       <option value="apple">apple 
       <option value="banana">banana 
       <option value="cherry">cherry 
       <option value="pear">pear 
      </select></p> 
     <p><input type="submit" value="Submit"></p> 
     <input type="hidden" name="command" value="do_it"> 
    </form> 
</body>

出典

2010-12-05 kamweshi

サーバ側のすべてのフォーム入力**を検証することを確認してください**。誰かがJavascript検証をバイパスすることは可能です。 –

バリデーションのルールが特に複雑でない限り、独自のロールアップではなく、ビルド前のjavascript検証ライブラリを使用することをおすすめします。そこにはたくさんの良いものがあります（私はhttp://bassistance.de/jquery-plugins/jquery-plugin-validation/が好きですが、jQueryやスタンドアロンのライブラリなどのフレームワークをベースにした他にもたくさんのlibsがあります））。 – GordonM

ここでは、Chromeで動作します（範囲は0〜11）。これは、あなた自身がそれを行うだけで、不必要な作業を引き起こしているだけでなく、サーバー側の検証もすべてそのまま残しておくことができます。 '少なくとも私のために' 11'を含んでいます。 –

これは明らかに宿題ですが、私はすべての質問には答えをdeservers beleave。有効なxhtml5、jslintでjavascriptをチェックし、ajaxminで圧縮しました。楽しい。

また、ppks Introduction to Formsもお読みください。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Week 08, Exercise 01</title> 
    <link rel="stylesheet" href="Week08_01.css"> 
    <script> 
    function validateInput(c){var f=c.inputString.value,d=c.inputInteger.value,b=parseInt(d,10),g=c.fruit.value;if(f!==""&&d!==""&&g!==""&&!isNaN(b)&&b>=0&&b<11)return true;else{var a="",e=false;if(f===""){a+="\nPlease enter a string with at least one letter or digit";e=true}if(d==="")a+="\nPlease enter an integer in the range 0-11";else if(isNaN(b))a+="\nPlease enter an integer";else if(b<=0)a+="\nPlease enter a positive integer";else if(b>11)a+="\nPlease enter an integer less than 11";if(e)c.inputString.focus();else c.inputInteger.focus();alert(a);return false}} 
    </script> 
</head> 
<body> 
    <h1>Week 08, Exercise 01</h1> 
    <form action="week08_01servlet" 
     method="post" 
     name="myForm" 
     onsubmit="return validateInput(this);"> 
     <p>Please enter the following information, 
     and then click the submit button.</p> 
     <p class="indent">A string with at least one letter or digit 
      <input type="text" name="inputString" /> 
      <br>An integer in the range 0-11 
      <input type="text" name="inputInteger" /> 
      <br />Pick a fruit <select name="fruit"> 
       <option value="---">---</option> 
       <option value="apple">apple</option> 
       <option value="banana">banana</option> 
       <option value="cherry">cherry</option> 
       <option value="pear">pear</option> 
      </select></p> 
     <p><input type="submit" value="Submit"> 
     <input type="hidden" name="command" value="do_it"></p> 
    </form> 
</body> 
</html>

出典

2010-12-05 13:31:23

ありがとう、それは今働いています。 – kamweshi

一般的にスタックオーバーフローに関する宿題に関する質問では、彼らのために仕事をする代わりに、手がかりを与えたり、OPを正しい答えに導くべきです。このようなコードスニペットを提供する場合は、コードの仕組みを説明してください。このコードが単純に全体としてコピー＆ペーストされた場合、OPは何も学習しません。 –

@In silico：私はあなたに同意しますが、先生が私のスクリプトタグの内容を尋ねることができます。 –

JavaScriptによるフォーム検証

答えて

関連する問題