フォーム検証機能を実装するためのネイティブ js

フォーム検証機能を実装するためのネイティブ js

フォーム検証は、Web フロントエンドの最も一般的な機能の 1 つであり、フロントエンド開発の基本的なスキルでもあります。フォーム検証の開発を自分で完了すると、文字列処理と正規表現の理解を深めるのにも役立ちます。

基本的なフォーム検証には、文字検証、数字検証、文字と数字の検証、漢字検証、パスワード検証、日付検証、携帯電話検証、電子メール検証、パスワード検証などが含まれます。

それでは、これらの検証コードの書き込みを完了しましょう。まず、文字がどのように検証されるかを見てみましょう。まず、必要な HTML コードを記述し、formContainer の ID を持つフォーム要素を作成し、英語の文字を確認する必要があるテキスト ボックスとボタンを追加します。また、プロンプト テキストを格納するために、テキスト ボックスの後に span 要素が必要です。以下のように表示されます。

<フォームアクション="" class="form_Box" id="formContainer">
 <ダウンロード>
  <dt>英語の文字:</dt>
  <dd><input type="text" id="verifyEn"><span></span></dd>
  <dd>
  <input type="submit" value="送信" class="btn 送信">
  <input type="reset" value="リセット" class="btn reset">
  </dd>
 </dl>
 </フォーム>

開発の際には、機能を段階的に分析して実装することで、明確な考え方を保つことができます。

1. フォーム要素とテキスト ボックス要素を次のように取得します。

var eFormContainer = document.getElementById('formContainer');
var eVerifyEn = document.getElementById('verifyEn');

2. 送信ボタンがクリックされたときに検証を行うために、送信イベントをフォーム要素にバインドします。

eFormContainer.addEventListener('submit',function(event){
 
});

この例では、検証に合格すると、検証に合格したことを示すプロンプトがポップアップ表示され、検証に失敗した場合には、カーソルがテキスト ボックス内に配置され、検証に失敗したことを示すプロンプトがテキスト ボックスの後に表示される必要があります。次に、送信イベント関数でこれを行う方法を見てみましょう。

3. まず関数内で関連する変数を宣言し、テキスト ボックスの値を取得します。 bPass 変数は検証に合格できるかどうかを判断するために使用され、sPrompt 変数はプロンプト テキストであり、sValue 変数はテキスト ボックスの値です。以下のように表示されます。

eFormContainer.addEventListener('submit',function(event){
 var bPass = false;
 var sPrompt = '';
 var sValue = eVerifyEn.value;
});

4. テキスト ボックスを空にしないでください。 sValue が空の文字列かどうかを判断します。空の文字列の場合は、テキスト ボックスの後にプロンプ​​トを表示し、テキスト ボックスをアクティブにします。また、後続の操作やデフォルトの動作を防止する必要があります。コードは次のとおりです。

eFormContainer.addEventListener('送信',function(){
 /* ... */
 
 if(sValue.trim()==''){
  //プロンプトテキストを変更します sPrompt = '英語の文字は空にできません!';
  //カーソルは文字テキスト ボックス内に配置されます eVerifyEn.focus();
  //テキスト ボックスの後にプロンプ​​ト テキストを表示します //テキスト ボックスの親要素を取得します let eParent = eVerifyEn.parentElement;
  //プロンプトを格納するspan要素を取得します。let eSpan = eParent.getElementsByTagName('span')[0];
  //span 要素にプロンプ​​トを追加します。eSpan.innerHTML = sPrompt;
  //フォームの送信を防止する event.preventDefault();
  // 後続のコード実行を防止します return;
 }
 
});

5. 入力値がルールを満たしているかどうか、つまり英語の文字のみで他の文字が含まれていないかどうかを判断します。ここで正規表現を宣言して、すべてが英語の文字であるかどうかを判断します。以下のように表示されます。

eFormContainer.addEventListener('送信',function(){
 /* ... */
 
 //正規表現を宣言し、文字列がすべて英語の文字であるかどうかを確認します。let reg = /^[a-zA-Z]+$/;
 bPass = reg.test(sValue);
 
});

6. 正規表現の結果に基づいて、送信が承認されるかブロックされます。

eFormContainer.addEventListener('送信',function(){
 /* ... */
 
 if(bPass){
  //プロンプトをポップアップ表示します。alert('検証に合格');
 }それ以外{
  //プロンプト テキストを変更します sPrompt = '英語の文字のみ入力できます!';
  //カーソルは文字テキスト ボックス内に配置されます eVerifyEn.focus();
  //テキスト ボックスの後にプロンプ​​ト テキストを表示します //テキスト ボックスの親要素を取得します let eParent = eVerifyEn.parentElement;
  //プロンプトを格納するspan要素を取得します。let eSpan = eParent.getElementsByTagName('span')[0];
  //span 要素にプロンプ​​トを追加します。eSpan.innerHTML = sPrompt;
  //フォームの送信を防止する event.preventDefault();
 }
 
});

7. テキスト ボックスにコンテンツを入力するときは、次に示すように次のプロンプトを削除する必要があります。

//eFormContainer 要素の入力イベントをバインドし、テキスト ボックスのすべての入力イベントを eFormContainer 要素に委任します。
 // これを実行する利点は、すべてのテキスト ボックスにイベントを追加する必要がないことです。
 eFormContainer.addEventListener('input',function(event){
 //現在のテキスト ボックスを取得します。let eInput = event.target;
 //テキスト ボックスの親要素を取得します。let eParent = eInput.parentElement;
 //プロンプトを格納するspan要素を取得します。let eSpan = eParent.getElementsByTagName('span')[0];
 // プロンプトをクリア eSpan.innerHTML = '';
 });

現時点での完全な JavaScript コードは次のとおりです。

関数 fnFormVerify(){
 // フォーム要素を取得します var eFormContainer = document.getElementById('formContainer');
 // 確認書のテキスト ボックスを取得します。 var eVerifyEn = document.getElementById('verifyEn');
 // 送信イベントをフォーム要素にバインドします eFormContainer.addEventListener('submit',function(){
  // 検証に合格したかどうかを判断するために bPass 変数を宣言します var bPass = false;
  //プロンプトテキストの sPrompt 変数を宣言します var sPrompt = '';
  // 文字テキスト ボックスの値を取得し、空でないことを確認してから、値に英語以外の文字が含まれているかどうかを判断します。コードは次のとおりです。
  var sValue = eVerifyEn.value;
  // 空でないことを確認する if (sValue.trim() == '') {
  //プロンプトテキストを変更します sPrompt = '英語の文字は空にできません!';
  //カーソルは文字テキスト ボックス内に配置されます eVerifyEn.focus();
  //テキスト ボックスの後にプロンプ​​ト テキストを表示します //テキスト ボックスの親要素を取得します let eParent = eVerifyEn.parentElement;
  //プロンプトを格納するspan要素を取得します。let eSpan = eParent.getElementsByTagName('span')[0];
  //span 要素にプロンプ​​トを追加します。eSpan.innerHTML = sPrompt;
  //フォームの送信を防止する event.preventDefault();
  // 後続のコード実行を防止します return;
  }

  //正規表現を宣言し、文字列がすべて英語の文字であるかどうかを確認します。let reg = /^[a-zA-Z]+$/;
  bPass = reg.test(sValue);
  if(bPass){
  //プロンプトをポップアップ表示します。alert('検証に合格');
  }それ以外{
  //プロンプト テキストを変更します sPrompt = '英語の文字のみ入力できます!';
  //カーソルは文字テキスト ボックス内に配置されます eVerifyEn.focus();
  //テキスト ボックスの後にプロンプ​​ト テキストを表示します //テキスト ボックスの親要素を取得します let eParent = eVerifyEn.parentElement;
  //プロンプトを格納するspan要素を取得します。let eSpan = eParent.getElementsByTagName('span')[0];
  //span 要素にプロンプ​​トを追加します。eSpan.innerHTML = sPrompt;
  //フォームの送信を防止する event.preventDefault();
  }
 });

 //eFormContainer 要素の入力イベントをバインドし、テキスト ボックスのすべての入力イベントを eFormContainer 要素に委任します。
 // これを実行する利点は、すべてのテキスト ボックスにイベントを追加する必要がないことです。
 eFormContainer.addEventListener('input',function(event){
  //現在のテキスト ボックスを取得します。let eInput = event.target;
  //テキスト ボックスの親要素を取得します。let eParent = eInput.parentElement;
  //プロンプトを格納するspan要素を取得します。let eSpan = eParent.getElementsByTagName('span')[0];
  // プロンプトをクリア eSpan.innerHTML = '';
 });
 }
 fnFormVerify();

効果は以下のようになります。

次に、デジタル認証、文字と数字の認証、漢字の認証、パスワードの認証、日付の認証、携帯電話の認証、電子メールの認証、パスワードなどの認証も完了する必要があります。すべての検証をこのように記述すると、煩雑になり、コードが増えてしまいます。そのため、文字列検証関数をカプセル化し、検証結果を返す必要があります。送信時に、各テキスト ボックスが順番に呼び出されます。

次の HTML 要素を追加します。

<フォームアクション="" class="form_Box" id="formContainer">
 <ダウンロード>
 <dt>英語の文字:</dt>
 <dd><input type="text" id="verifyEn"><span></span></dd>
 <dt>英語と数字:</dt>
 <dd><input type="text" id="verifyEnNum"><span></span></dd>
 <dt>番号:</dt>
 <dd><input type="text" id="verifyNum"><span></span></dd>
 <dt>中国語の文字:</dt>
 <dd><input type="text" id="verifyCn"><span></span></dd>
 <dt>日付:</dt>
 <dd><input type="text" id="verifyDate"><span></span></dd>
 <dt>メールアドレス:</dt>
 <dd><input type="text" id="verifyEmail"><span></span></dd>
 <dt>携帯電話:</dt>
 <dd><input type="text" id="verifyPhone"><span></span></dd>
 <dt>パスワード:</dt>
 <dd><input type="password" id="verifyPwd"><span></span></dd>
 <dt>パスワードの確認:</dt>
 <dd><input type="password" id="verifyForPwd"><span></span></dd>
 <dt></dt>
 <dd>
  <input type="submit" value="送信" class="btn 送信">
  <input type="reset" value="リセット" class="btn reset">
 </dd>
 </dl>
</フォーム>

js コードを再度変更します。

1. フォーム要素とすべてのテキスト ボックスを次のように取得します。

// フォーム要素を取得します var eFormContainer = document.getElementById('formContainer');
 // 確認書のテキスト ボックスを取得します。 var eVerifyEn = document.getElementById('verifyEn');
 // 英語とデジタルのテキスト ボックスを取得します var eVerifyEnNum = document.getElementById('verifyEnNum');
 // デジタルテキストボックスを取得します var eVerifyNum = document.getElementById('verifyNum');
 // 中国語の文字テキスト ボックスを取得します。var eVerifyCn = document.getElementById('verifyCn');
 // 日付テキスト ボックスを取得します var eVerifyDate = document.getElementById('verifyDate');
 // メールテキストボックスを取得します var eVerifyEmail = document.getElementById('verifyEmail');
 // 電話番号テキストボックスを取得します。 var eVerifyPhone = document.getElementById('verifyPhone');
 // パスワードテキストボックスを取得します。 var eVerifyPwd = document.getElementById('verifyPwd');
 // 確認パスワードテキストボックスを取得します。 var eVerifyForPwd = document.getElementById('verifyForPwd');

2. 検証関数をカプセル化し、3 つのパラメータを渡します。elem はテキスト ボックス要素、reg は正規表現、text はプロンプト キーワードです。以下のように表示されます。

関数 fnVerify(要素, reg, テキスト){
 //テキストボックスに入力された文字を取得します。var sValue = elem.value;
 //テキスト ボックスの親要素を取得します。let eParent = elem.parentElement;
 //プロンプトを格納するspan要素を取得します。let eSpan = eParent.getElementsByTagName('span')[0];

 //テキストボックスの文字が空かどうかを判断します if (sValue.trim() == '') {
 //カーソルはテキスト ボックス上に配置されます elem.focus();
 //テキスト ボックスの後にプロンプ​​ト テキストを表示します。eSpan.innerHTML = text + '空にすることはできません!';
 //falseを返す
 false を返します。
 }

 // 文字列が規則を満たしているかどうかを判定する if(reg.test(sValue)){
 // 一致した場合は true を返す
 true を返します。
 }それ以外{
 //カーソルはテキスト ボックス上に配置されます elem.focus();
 //テキスト ボックスの後にプロンプ​​ト テキストを表示します。eSpan.innerHTML = text + '形式が正しくありません!';
 //一致しない場合はfalseを返す
 false を返します。
 }
}

3. フォーム要素の送信イベントを次のようにバインドします。

eFormContainer.addEventListener('submit',function(event){
 // 検証に合格したかどうかを判断するために bPass 変数を宣言します var bPass = false;
 
 //テキストボックスのフォーマットを1つずつ検証する bPass = fnVerify(eVerifyEn,/^[a-zA-Z]+$/,'英語の文字') &&
   fnVerify(eVerifyEnNum,/^[a-zA-Z0-9]*$/,'英語と数字') &&
   fnVerify(eVerifyNum,/^\d*$/,'数値') &&
   fnVerify(eVerifyCn,/^[\u0391-\uFFE5]+$/,'中国語の文字') &&
   fnVerify(eVerifyDate,/^(\d{2}|\d{4})-\d{1,2}-\d{1,2}$/,'日付') &&
   fnVerify(eVerifyEmail,/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,'メール') &&
   fnVerify(eVerifyPhone,/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/,'手机') &&
   fnVerify(eVerifyPwd,/^[\w!@#$%^&*?\(\)]{6,16}$/,'パスワード');

 //パスワードがパスワードと一致していることを確認し、別の検証を追加します if (eVerifyPwd.value !== eVerifyForPwd.value) {
 //パスワード確認のための親要素を取得します。let eParent = eVerifyForPwd.parentElement;
 //プロンプトのスパン要素を取得します。let eSpan = eParent.getElementsByTagName('span')[0];
 //プロンプトエラー eSpan.innerHTML = 'パスワードの確認は password と一致している必要があります';
 //パスワード確認入力ボックスをアクティブにする eVerifyForPwd.focus();
 //後続の操作を防止する bPass = false;
 }

 if(bPass){
 //プロンプトをポップアップ表示します。alert('検証に合格');
 event.preventDefault(); //この行は実際の作業には使用できません。ここではフォームのデフォルトの動作を防止するために使用されます。
 }それ以外{
 //フォームの送信を防止する event.preventDefault();
 }
 
});

解決すべき別の問題があります。テキスト ボックスにコンテンツを入力するときは、その後ろのプロンプトを削除する必要があります。そうしないと、入力が正しい場合でもエラー プロンプトが表示されるのは異常です。

4. 入力中にプロンプ​​ト テキストを削除するには、入力イベントを eFormContainer 要素にバインドします。

eFormContainer.addEventListener('input',function(event){
 //現在のテキスト ボックスを取得します。let eInput = event.target;
 //テキスト ボックスの親要素を取得します。let eParent = eInput.parentElement;
 //プロンプトを格納するspan要素を取得します。let eSpan = eParent.getElementsByTagName('span')[0];
 // プロンプトをクリア eSpan.innerHTML = '';
});

この時点で、完全なフォーム検証ページが基本的に完成します。このサンプル チュートリアルでは、送信フォーム イベントを使用しますが、現在の実際の開発では、この方法でフォームを直接送信することはほとんどありません。この記述は読者の誤解を避けるためになされたものです。

上記は、ネイティブ js でフォーム検証を実装する方法の詳細です。js フォーム検証の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

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

<<:  InnoDB エンジンの redo ファイルのメンテナンス方法

>>:  MySQLデータベースでゼロ値を含む日付の問題について簡単に説明します

推薦する

MySQLのLIMIT文について詳しく説明します

目次質問サーバー層とストレージエンジン層LIMITって何ですか?何をするか?トゥカオ最近、Q&...

Docker を使用した nGrinder パフォーマンス テスト プラットフォームの導入プロセスの分析

nGrinderとは何ですか? nGrinder は、スクリプトの作成、テストの実行、監視、結果レポ...

LeetCode の SQL 実装 (181. 従業員は管理職よりも収入が高い)

[LeetCode] 181.従業員の収入が管理職よりも多い従業員テーブルには、マネージャーを含む...

Vue における属性とプロパティの具体的な使用法と違い

目次Vue.jsにおける属性とプロパティ値および関連する処理として属性とプロパティの概念属性とプロパ...

数百万のデータボリュームに対する MySQL ページングクエリ方法とその最適化の提案

データベース SQL の最適化はよくある問題です。何百万ものデータ ボリュームに対してページング ク...

Vue 開発ツリー構造コンポーネント (コンポーネント再帰)

この記事では、Vue開発ツリー構造コンポーネントの具体的なコードを例として紹介します。具体的な内容は...

Windows 10 での MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル

この記事では、最新バージョンの MySQL データベース、つまり MySQL 5.7.17 圧縮バー...

docker run -v はデータボリュームを異常にマウントし、コンテナのステータスは常に再起動になります。

問題点: docker run に -v パラメータを追加すると、コンテナは常に再起動状態になります...

Vue の computed と watch の違いを分析する

目次1. 計算入門1.1、getとsetの使い方1.2. 計算された属性キャッシュ2. 時計の紹介3...

Vue3でアイコンを使用する2つの例

目次1. SVGを使用する2. fontAwesomeを使用する3 ソース4 結論テクノロジースタッ...

Linux/Docker で System.Drawing.Common を使用する

序文プロジェクトを .net core に移行した後、 System.Drawing.Commonコ...

MySQL (8 および 5.7) の Docker インストール

この記事では、Dockerを使用してMySQLデータベースとリモートアクセス構成をデプロイする方法を...

ウェブページ HTML 順序付きリスト ol と順序なしリスト ul

データを整理するためのリストWeb ページの表示を制御する多数の HTML タグを学習した後、読者は...

商品クエリ機能を実現するJavaScript

この記事の例では、商品検索機能を実現するためのJavaScriptの具体的なコードを参考までに共有し...

mysql5.7.24 バージョンのインストール手順と解凍時に発生した問題の概要

1. ダウンロード参考: 2. D:\MySQL\mysql-5.7.24 などの固定の場所に解凍し...