JavaScript フォーム検証の例

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 を保存します。

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

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ネイティブ js はフォームの定期的な検証を実装します (検証後にのみ送信)
  • フォーム検証機能を実装するためのネイティブ js
  • JavaScript によるフォーム検証の実装
  • JS シンプルなフォーム検証関数の完全な例
  • フォーム要素を使用してフォームを検証するために JavaScript を使用するサンプル コード
  • JavaScriptはフォーム登録、フォーム検証、演算子関数を実装します
  • JS で実装されたシンプルなフォーム検証の完全な例
  • JS で実装されたシンプルなフォーム検証機能の例
  • JavaScript の基本的なフォーム検証の例 (純粋な Js 実装)
  • JavaScript によるフォーム検証の実装

<<:  IDEA が MySQL ポート番号占有に接続できない問題の解決方法

>>:  HTML でフレームセット タグを使用するチュートリアル

推薦する

Docker を使用した war パッケージ プロジェクトのデプロイの実装

Docker で war をデプロイするには、コンテナを使用する必要があります。ここでは tomca...

JS関数の継承について学ぶ記事

目次1. はじめに: 2. プロトタイプチェーン継承: 3. コンストラクタ継承の借用(オブジェクト...

組み込み移植 docker エラー問題 (概要)

長い移植と情報検索の期間を経て、組み込みDockerの問題を解決することができました。インターネット...

MySQL SHOW STATUSステートメントの使用

MySQL のパフォーマンス調整とサービス ステータスの監視を行うには、MySQL の現在の実行状態...

JavaScript タイマーの詳細

目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...

JavaScript のカンマ式が含まれている場合について

JavaScript の if ステートメントで英語のカンマ「,」が表示されることがあります。これは...

Centos7 環境でバイナリ インストール パッケージから mysql5.6 をインストールする方法の詳細な説明

この記事では、centos7 環境でバイナリ インストール パッケージを使用して mysql5.6 ...

Docker ベースの Selenium 分散環境の構築

1.画像をダウンロードするdocker pull selenium/hub docker pull ...

MySQL 5.7.17 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

インターネット上にはMySQL 5.7.17のインストールチュートリアルがほとんどなく不十分なので、...

Linux サーバー上で nvidia-docker 環境を設定するプロセスの詳細な説明

Docker はコンテナに相当し、必要な動作環境に応じて対応する動作環境を構築できます。このとき、各...

Vue で lodop 印刷コントロールを使用してブラウザ互換の印刷を実現する方法

序文このコントロールを直接印刷すると下部に透かしが入りますが、公式 Web サイトから購入することで...

MySQLデータ内の多数の改行と復帰に対する解決策

目次問題を見つける1. 改行と復帰を削除する方法2. SELECTクエリで「改行と復帰」を無視する方...

MySql におけるプロセス制御関数/統計関数/グループ化クエリの使用法の分析

これからの道のりは長く困難ですが、私は探求を続けます。また週末がやってきました。引き続き、皆さんと一...

Nginxの書き換えモジュールの詳細な説明

書き換えモジュールは ngx_http_rewrite_module モジュールです。その主な機能は...

モバイルデバイス用のメタタグ設定の完全なリスト

序文以前フロントエンドを勉強していたとき、メタタグに対する私の理解はこの一文だけでした。 <メ...