JavaScriptのフォームバリデーションを詳しく解説_基礎知識-jsチュートリアル-php.cn

JavaScriptのフォームバリデーションを詳しく解説_基礎知識

WBOY

リリース： 2016-05-16 15:54:30

オリジナル

971 人が閲覧しました

フォーム検証は、クライアントが必要なデータをすべて入力して送信ボタンを押した後、サーバー上で行われます。クライアントによって入力されたデータの一部が間違った形式であるか、単に欠落している場合、サーバーはすべてのデータをクライアントに送り返し、正しい情報を含むフォームの再送信を要求する必要があります。これは時間のかかるプロセスであり、サーバーの負荷が増加します。

JavaScript は、フォームデータを Web サーバーに送信する前にクライアントのコンピューター上で検証する方法を提供します。フォームの検証は通常 2 つの方法で実行されます。

基本的な検証 - まず、フォームをチェックして、フォームの各フィールドにデータ入力が必要であることを確認する必要があります。これはテーブルの各フィールドをループしてデータをチェックするだけです。
データ形式の検証 - 次に、入力されるデータの形式と値が正しいかどうかをチェックする必要があります。これには、データの正確性をテストするためにさらに多くのロジックを導入する必要があります。

検証プロセスを理解するために例を示します。以下は単純な形式です:

<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
 <form action="/cgi-bin/test.cgi" name="myForm" 
     onsubmit="return(validate());">
 <table cellspacing="2" cellpadding="2" border="1">
 <tr>
  <td align="right">Name</td>
  <td><input type="text" name="Name" /></td>
 </tr>
 <tr>
  <td align="right">EMail</td>
  <td><input type="text" name="EMail" /></td>
 </tr>
 <tr>
  <td align="right">Zip Code</td>
  <td><input type="text" name="Zip" /></td>
 </tr>
 <tr>
 <td align="right">Country</td>
 <td>
 <select name="Country">
  <option value="-1" selected>[choose yours]</option>
  <option value="1">USA</option>
  <option value="2">UK</option>
  <option value="3">INDIA</option>
 </select>
 </td>
 </tr>
 <tr>
  <td align="right"></td>
  <td><input type="submit" value="Submit" /></td>
 </tr>
 </table>
 </form>
 </body>
 </html>

ログイン後にコピー

基本的なフォーム検証:

まず、基本的なフォーム検証の方法を説明します。上の表では、onsubmit イベントが発生する前にデータを検証するために validate() 関数が必要です。以下は validate() 関数の実装です:

<script type="text/javascript">
<!--
// Form validation code will come here.
function validate()
{
 
  if( document.myForm.Name.value == "" )
  {
   alert( "Please provide your name!" );
   document.myForm.Name.focus() ;
   return false;
  }
  if( document.myForm.EMail.value == "" )
  {
   alert( "Please provide your Email!" );
   document.myForm.EMail.focus() ;
   return false;
  }
  if( document.myForm.Zip.value == "" ||
      isNaN( document.myForm.Zip.value ) ||
      document.myForm.Zip.value.length != 5 )
  {
   alert( "Please provide a zip in the format #####." );
   document.myForm.Zip.focus() ;
   return false;
  }
  if( document.myForm.Country.value == "-1" )
  {
   alert( "Please provide your country!" );
   return false;
  }
  return( true );
}
//-->
</script>

ログイン後にコピー

データ形式の検証:

ここで、入力したフォームデータを Web サーバーに送信する前に検証する方法を見てみましょう。

この例は、入力された電子メールアドレスを検証する方法を示しています。つまり、電子メールアドレスには少なくとも @ 記号とドット (.) が含まれている必要があります。さらに、@ を電子メールアドレスの最初の文字にすることはできず、最後のドットは @ 記号の 1 文字後にある必要があります:

<script type="text/javascript">
<!--
function validateEmail()
{
 
  var emailID = document.myForm.EMail.value;
  atpos = emailID.indexOf("@");
  dotpos = emailID.lastIndexOf(".");
  if (atpos < 1 || ( dotpos - atpos < 2 )) 
  {
    alert("Please enter correct email ID")
    document.myForm.EMail.focus() ;
    return false;
  }
  return( true );
}
//-->
</script>

ログイン後にコピー