フォームの入力を検証する

-1

以下の入力（名前と年齢）を検証するにはどうすればよいですか？例えば。空の入力を許可しない、最大年齢は0〜100、最大長は？私は今、JavaScript/JQueryを見ています。フォームの入力を検証する

<form action="#"> 
    <fieldset> 
     <div class="textinput"> 
      <label for="name">Your name:</label> 
      <input type="text" name="name"> 
     </div> 

     <div class="textinput"> 
      <label for="name">Your age:</label> 
      <input type="text" name="age"> 
     </div> 

     <div class="textareainput"> 
      <label for="info">About yourself:</label> 
      <textarea></textarea> 
     </div> 

     <div class="action"> 
      <button>Submit</button> 
     </div> 
    </fieldset> 
</form>

これは悪い質問ではありません。それが私の将来の記事を改善することができますので、私にdownvoteの理由を与えてください。

出典

2016-08-17 skylake

私は非常にJSのガイドを読むことをお勧めします。（ヒント：JSを使って現在の状態でフォームを検証する場合は、HTMLを修正してIDを追加する必要があります） –

@ d3r1ckわかりましたが、私はそれに同意できません。その部分を削除しました。ご意見ありがとうございます。 – skylake

私はこれがあなたの望むものだと思う。あなたのスクリプトを検証するのに使うことができる非常に多くのライブラリ（バリデーション）があります。しかし、あなたが自分のやり方でそれをしたいなら、これを試してみてください。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
\t 
 
<form action="#"> 
 
     <fieldset> 
 
      <div class="textinput"> 
 
       <label for="name">Your name:</label> 
 
       <input type="text" name="name" id="nameid"> 
 
      </div> 
 

 
      <div class="textinput"> 
 
       <label for="name">Your age:</label> 
 
       <input type="text" name="age" id="ageid"> 
 
      </div> 
 

 
      <div class="textareainput"> 
 
       <label for="info">About yourself:</label> 
 
       <textarea id="textareaid"></textarea> 
 
      </div> 
 
      <h3 style="color:red;font-family:monospace;" id="warning"></h3> 
 
      <div class="action"> 
 
       <input type="button" value="submit" id="click"> 
 
      </div> 
 
     </fieldset> 
 
    </form> 
 
\t 
 
</body> 
 

 
<script type="text/javascript"> 
 
    $("#click").click(function(){ 
 
    \t $("#warning").text(""); 
 
    \t var namefield = $("#nameid").val(); 
 
    \t var agefield = $("#ageid").val(); 
 
    \t var texarefield = $("#textareaid").val(); 
 

 
    \t if (namefield == "" || agefield == "" || texarefield == "") 
 
    \t { 
 
    \t \t $("#warning").text("all field sholud be fill"); 
 
    \t } 
 
     else if (namefield != "" && agefield != "" && texarefield != "") 
 
     { 
 
     \t var ageInteger = parseInt(agefield); 
 

 
     \t if (ageInteger < 0 || ageInteger > 100) 
 
     \t { 
 
     \t \t $("#warning").text("age should be between 0 and 100"); 
 
     \t } 
 
     \t else 
 
     \t { 
 
     \t \t $("#warning").text(""); 
 
     \t } 
 
     } 
 

 
     else 
 
     { 
 
     \t $("#warning").text(""); 
 
     } 
 

 
    }); 
 
</script> 
 
</html>

これは、これはあなたに役立つ非常に基本的でシンプルなvalidation.hopeです。

出典

2016-08-17 05:30:37

-1

あなたは変更する必要はありませんhttps://jqueryvalidation.org/

HTMLを使用することができます。 https://jqueryvalidation.org/validate/#rules

出典

2016-08-17 02:11:06