JavaScript フォーム検証の例

HTML フォームは、名前、電子メールアドレス、場所、年齢などのユーザー情報を収集するためによく使用されます。

しかし、ユーザーによっては期待したデータを入力しない可能性もあります。 HTML フォームの検証は JavaScript 経由で実行できます。

サーバーリソースへの不要な負荷を回避するために、JavaScript を使用してクライアント (ユーザーシステム) でフォームデータを検証できます。誤った情報はバックエンドサーバーに送信されません。これをクライアント側検証と呼びます。この記事ではこの検証を紹介します

フォームの検証は一般的に 2 つの方法に分けられます。

クライアント側の検証:クライアント上で直接 JS を実行して検証を実行します。検証プロセス中にサーバーとのやり取りは行われません。

サーバー側の検証:ページは検証情報をサーバーに送り返し、サーバーは検証を実行して検証結果をクライアントに送り返します。

両方の検証が必要なのは、クライアント側の検証セキュリティがそれほど高くないからですが、ユーザーの誤操作を 80% 以上防止でき、サーバーへの負荷を軽減し、非常に高速で、高いユーザーエクスペリエンスを提供できます。クライアント側の検証があればサーバー側の検証は必要ないと考えないでください。クライアント側の検証は簡単にバイパスできます。サーバー側の検証の方が安全であるため、通常は両方の検証を記述する必要があります。】

例1: 簡単な例

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>簡単なフォーム検証の例</title>
</head>
<ヘッド>
<スクリプト>
関数validateForm(){
var x = document.forms["myForm"]["fname"].value;
(x==null || x=="")の場合{
  //alert("名前を入力する必要があります");
  usernameerror.innerHTML="<font color='red'>名前は必須です</font>";
  false を返します。
  }
それ以外{
  ユーザー名error.innerHTML="正しい";
  true を返します。
  }  
 
}
</スクリプト>
</head>
<本文>
<!-- 
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
-->
<form name="myForm" onsubmit="return validateForm()" >
名前: <input type="text" name="fname" id="username">
<span id="ユーザー名エラー"></span>
<br>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</フォーム>
 
</本文>
</html>

ファイル名: フォーム検証例1.html を保存します。

ブラウザでテストを実行すると、結果は次のようになります。

例2: より複雑な例

<!DOCTYPE html>
<html>
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>フォーム検証の例: ユーザー登録</title>
  
  <スタイル タイプ="text/css">
  </スタイル>
 
  <スクリプト>
    関数 checkusername()
    {
      var myform = document.getElementById("form1");
      var ユーザー名 = myform.username.value.length;
      if(ユーザー名 < 1||ユーザー名>12)
      {
        errusername.innerHTML = "<font color='red'>ユーザー名が要件を満たしていません</font>";
        false を返します。
      }それ以外{
        errusername.innerHTML = "<font color='green'>ユーザー名は要件を満たしています</font>";
        true を返します。
      }
    }
    関数チェック()
    {
      var myform = document.getElementById("form1");
      var age = myform.age.value;
      年齢がparseInt(年齢)と等しい場合
      {
        errage.innerHTML = "<font color='red'>年齢が要件を満たしていません</font>";
        false を返します。
      }それ以外{
        errage.innerHTML = "<font color='green'>年齢は要件を満たしています</font>";
        true を返します。
      }
    }
    関数 checkemail()
    {
      var myform = document.getElementById("form1");
      var mail=/^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if(!mail.test(myform.email.value))
      {  
        erremail.innerHTML = "<font color='red'>電子メールが要件を満たしていません</font>";
        false を返します。
      }それ以外{
        erremail.innerHTML = "<font color='green'>電子メールは要件を満たしています</font>";
        true を返します。
      }
    }
    関数 checkform()
    {
      checkusername();checkage();checkemail();
      if(checkusername()&&checkage()&&checkemail())
      {
        true を返します。  
      }それ以外{
        false を返します。
      }
    }
  </スクリプト>
</head>
 
<本文>
<!--
 <form id="form1" name="form1" method="post" action="ttt.jsp" onsubmit="return checkform()">
-->
 
 <form id="form1" name="form1" method="post" onsubmit="return checkform()">
<テーブルの幅="777" 境界線="0" セルパディング="1" セル間隔="1">
 <tr>
  <td colspan="3" ><div align="center">登録情報を入力してください</div></td>
 </tr>
 <tr>
  <td width="250" ><div align="right" >ユーザー名を入力してください: </div></td>
  <td width="250"><div align="center">
     <input type="text" name="ユーザー名" onblur="checkusername()" />  
   </div></td>
  <td><div id="errusername" align="center"></div></td>
 </tr>
 <tr>
  <td width="250"><div align="right">年齢を入力してください:</div></td>
  <td width="250"><div align="center" >
   <ラベル>
   <input type="text" name="age" onblur="checkage()"/>
   </ラベル>
  </div></td>
   <td><div align="center" id="errage"></div></td>
 </tr>
 <tr>
  <td width="250"><div align="right" >メールアドレスを入力してください:</div></td>
  <td width="250"><div align="center" >
   <ラベル>
   <input type="text" name="email" onblur="checkemail()" />
   </ラベル>
  </div></td>
   <td><div align="center" id="erremail"></div></td>
 </tr>
 <tr>
  <td><div align="right">
   <ラベル>
   <input type="submit" name="送信" value="送信" />
   </ラベル>
  </div></td>
   <td><div align="center">
    <ラベル>
    <input type="reset" name="送信2" value="リセット" />
    </ラベル>
   </div></td>
  <td><div align="center"></div></td>
 </tr>
</テーブル>
 
</フォーム>
 
</本文>
</html>

ファイル名: フォーム検証例1.html を保存します。

ブラウザでテストを実行すると、結果は次のようになります。