ホームページ > 記事 > ウェブフロントエンド > JavaScriptのフォームバリデーションを詳しく解説_基礎知識

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

WBOYオリジナル: 2016-05-16 15:54:30954ブラウズ

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

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>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript AOP プログラミングの例_JavaScript スキル次の記事：JavaScript AOP プログラミングの例_JavaScript スキル

続きを見る

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

関連記事