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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: IDEA が MySQL ポート番号占有に接続できない問題の解決方法
>>: HTML でフレームセット タグを使用するチュートリアル
Docker で war をデプロイするには、コンテナを使用する必要があります。ここでは tomca...
目次1. はじめに: 2. プロトタイプチェーン継承: 3. コンストラクタ継承の借用(オブジェクト...
長い移植と情報検索の期間を経て、組み込みDockerの問題を解決することができました。インターネット...
MySQL のパフォーマンス調整とサービス ステータスの監視を行うには、MySQL の現在の実行状態...
目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...
JavaScript の if ステートメントで英語のカンマ「,」が表示されることがあります。これは...
この記事では、centos7 環境でバイナリ インストール パッケージを使用して mysql5.6 ...
1.画像をダウンロードするdocker pull selenium/hub docker pull ...
インターネット上にはMySQL 5.7.17のインストールチュートリアルがほとんどなく不十分なので、...
Docker はコンテナに相当し、必要な動作環境に応じて対応する動作環境を構築できます。このとき、各...
序文このコントロールを直接印刷すると下部に透かしが入りますが、公式 Web サイトから購入することで...
目次問題を見つける1. 改行と復帰を削除する方法2. SELECTクエリで「改行と復帰」を無視する方...
これからの道のりは長く困難ですが、私は探求を続けます。また週末がやってきました。引き続き、皆さんと一...
書き換えモジュールは ngx_http_rewrite_module モジュールです。その主な機能は...
序文以前フロントエンドを勉強していたとき、メタタグに対する私の理解はこの一文だけでした。 <メ...