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

<フォームアクション="" 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>
 </フォーム>

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

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

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

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;
 }
 
});

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

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();
 }
 
});

//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(){
 // フォーム要素を取得します 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();

<フォームアクション="" 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>
</フォーム>

// フォーム要素を取得します 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');

関数 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 を返します。
 }
}

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();
 }
 
});

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