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

1. フォーム要素とテキストボックス要素を次のように取得します。
2. 送信ボタンがクリックされたときに検証を行うために、送信イベントをフォーム要素にバインドします。
3. まず関数内で関連する変数を宣言し、テキストボックスの値を取得します。 bPass 変数は検証に合格できるかどうかを判断するために使用され、sPrompt 変数はプロンプトテキストであり、sValue 変数はテキストボックスの値です。以下のように表示されます。
4. テキストボックスを空にしないでください。 sValue が空の文字列かどうかを判断します。空の文字列の場合は、テキストボックスの後にプロンプトを表示し、テキストボックスをアクティブにします。また、後続の操作やデフォルトの動作を防止する必要があります。コードは次のとおりです。
5. 入力値がルールを満たしているかどうか、つまり英語の文字のみで他の文字が含まれていないかどうかを判断します。ここで正規表現を宣言して、すべてが英語の文字であるかどうかを判断します。以下のように表示されます。
6. 正規表現の結果に基づいて、送信が承認されるかブロックされます。
7. テキストボックスにコンテンツを入力するときは、次に示すように次のプロンプトを削除する必要があります。

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

1. 次のようにフォーム要素とすべてのテキストボックスを取得します。
2. 検証関数をカプセル化し、3 つのパラメータを渡します。elem はテキストボックス要素、reg は正規表現、text はプロンプトキーワードです。以下のように表示されます。
3. フォーム要素の送信イベントを次のようにバインドします。
4. 入力中にプロンプトテキストを削除するには、入力イベントを eFormContainer 要素にバインドします。

フォーム検証は、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 の他の関連記事に注目してください。

以下もご興味があるかもしれません: