フォーム検証機能を実装するためのネイティブ 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データベースでゼロ値を含む日付の問題について簡単に説明します

推薦する

Nginx に lua-nginx-module モジュールをインストールする方法

ngx_lua_module は、lua パーサーを nginx に埋め込み、lua 言語で記述され...

MySQL データベース開発の 36 の原則 (要約)

序文これらの原則は実際の戦闘から要約されています。あらゆる原則の背後には血なまぐさい教訓があるこれら...

Vue の el-table は自動天井効果を実現します (固定をサポート)

目次序文実装のアイデア効果:使用:メインソースコード:序文多くのケースを見た結果、単純な観点からは、...

Linux で crond ツールを使用してスケジュールされたタスクを作成する方法

序文Crond は Linux のスケジュール実行ツール (Windows のスケジュールされたタス...

nodejsとyarnをインストールし、Taobaoソースプロセスレコードを構成する

目次1. nodejsをダウンロードする2. ダブルクリックしてインストール3. グローバル npm...

iOS WeChat H5ページのゴム反発効果の落とし穴記録

ビジネス要件最近開発したプロジェクトの一つに、WeChat公式アカウントに関連したH5ページがありま...

WeChat公式アカウントでReactプロジェクトを実行する方法

目次1. a タグを使用して PDF をプレビューまたはダウンロードします。書き方は、携帯電話でクリ...

MySQL で遅いファジークエリを最適化する方法

目次1. はじめに: 2. 最初のアイデアはインデックスを構築することです3. 命令P.S. Lik...

DCL を使用して MySQL でユーザーを管理し、権限を制御する方法

DCL (データ制御言語): データベースのアクセス権とセキュリティ レベルを定義し、ユーザーを作成...

Windows10でのMySQL 5.7.21のインストールと設定のチュートリアル

この記事では、MySQL 5.7.21 のインストールと設定方法を記録し、皆様と共有します。 1. ...

MySQL マスタースレーブレプリケーションのいくつかのレプリケーション方法の概要

非同期レプリケーションMySQL レプリケーションは、デフォルトでは非同期です。マスター スレーブ ...

CSS3 Flex エラスティックレイアウトのサンプルコードの詳細な説明

1. 基本概念 //任意のコンテナを Flex レイアウトとして指定できます。 。箱{ ディスプレイ...

CSS3 の transition、transform、translate の違いと機能の簡単な分析

変換して翻訳するTransform は、変換と変形を意味します。他の幅属性や高さ属性と同様に、CSS...

MySQLはインデックスプッシュダウンを数秒で理解するのに役立ちます

目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...

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

このチュートリアルでは、MySQL 5.7のインストールと設定方法を参考までに紹介します。具体的な内...