JavaScriptでリアルタイムに空かどうかを判断する方法

Web 開発では、フォームはビジネス ロジックの重要なコンポーネントの 1 つであり、フォームの検証はセキュリティの基本的な考慮事項です。フォームにおいて、入力ボックスの検証は最も基本的かつ必要な検証であり、入力ボックスの内容が空であるかどうかを判断することが最も一般的な検証です。ここではJavaScriptで空でないことのリアルタイム判定を実現する方法を紹介します。

1. 入力ボックスのリアルタイム監視
   空ではないことをリアルタイムで判定する効果を得るには、JavaScript を通じて入力ボックスをリアルタイムで監視する必要があります。入力の oninput イベントをリッスンすることで、入力ボックス内のテキストをリアルタイムで更新できます。

<input type="text" id="input" oninput="checkEmpty()">

上記のコードでは、oninput イベントが入力に追加されます。イベントがトリガーされると、checkEmpty という名前の関数が呼び出されます。この関数は、値があるかどうかを判断するために使用されます。入力。

2. 入力ボックスの値を確認する
   入力ボックスをリアルタイムで監視した後、関数 checkEmpty を作成して入力ボックスに値があるかどうかを確認し、値を変更する必要があります。値スタイルまたはプロンプト情報があるかどうかに応じて、入力ボックス。

function checkEmpty() {
  var inputEl = document.getElementById("input");
  if (inputEl.value.trim() == "") {
    inputEl.style.borderColor = "red";
    inputEl.nextElementSibling.innerHTML = "此项不能为空";
  } else {
    inputEl.style.borderColor = "green";
    inputEl.nextElementSibling.innerHTML = "";
  }
}

上記のコードでは、まず入力ボックスの DOM オブジェクトを取得し、次に入力ボックスの値が空かどうかを判断して、入力ボックスのスタイルまたはプロンプト情報を変更します。入力ボックスが空の場合は、入力ボックスの境界線の色を赤に設定し、入力ボックスの後ろに「この項目を空にすることはできません」というプロンプト メッセージを追加します。入力ボックスが空でない場合は、境界線の色を緑に設定します。をクリックして、プロンプト情報をクリアします。

3. すべての入力ボックスに検証関数を適用する
   最後に、検証が必要なすべての入力ボックスに checkEmpty 関数を適用する必要があります。実際の開発では、多くの場合、検証が必要な入力ボックスをクラスでマークし、 document.getElementsByClassName() メソッドを使用して、このクラスでマークされたすべての入力ボックスを取得し、ループして checkEmpty 関数を再度呼び出します。

var inputs = document.getElementsByClassName("required");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("input", checkEmpty);
}

上記のコードでは、最初に document.getElementsByClassName("required") メソッドを使用して検証が必要なすべての入力ボックスを取得し、次にループ トラバーサルを使用してすべての入力ボックスに oninput イベントを追加します。入力ボックスが入力され、イベントがトリガーされます。検証のために checkEmpty 関数が実行されます。

概要:
上記の 3 つの手順を通じて、入力ボックスが空ではないことをリアルタイムで確認する簡単な JavaScript ベースの検証を実装できます。もちろん、実際の開発ではさらに複雑なフォーム検証要件が発生する可能性があるため、上記の例をベースとして使用し、ビジネス ロジックに基づいて適切な改善を加えることができます。

以上がJavaScriptでリアルタイムに空かどうかを判断する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。