So beurteilen Sie in Echtzeit mit Javascript, ob es leer ist

In der Webentwicklung sind Formulare eine der wichtigen Komponenten der Geschäftslogik, und die Formularüberprüfung ist ein grundlegender Sicherheitsaspekt. Im Formular ist die Überprüfung des Eingabefelds die grundlegendste und notwendigste, und die Beurteilung, ob der Inhalt des Eingabefelds leer ist, ist die häufigste Überprüfung. Hier stellen wir die Methode von Javascript vor, um in Echtzeit festzustellen, dass es nicht leer ist.

1. Echtzeitüberwachung des Eingabefelds
   Um den Effekt einer Echtzeitbeurteilung zu erzielen, dass es nicht leer ist, müssen wir das Eingabefeld in Echtzeit über Javascript überwachen. Wir können den Text im Eingabefeld in Echtzeit aktualisieren, indem wir das oninput-Ereignis der Eingabe abhören.

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

Fügen Sie im obigen Code das oninput-Ereignis zur Eingabe hinzu. Wenn das Ereignis ausgelöst wird, wird eine Funktion namens checkEmpty aufgerufen, um zu bestimmen, ob in der Eingabe ein Wert vorhanden ist.

2. Überprüfen Sie den Wert im Eingabefeld.
   Nachdem wir das Eingabefeld in Echtzeit überwacht haben, müssen wir eine Funktion checkEmpty schreiben, um zu überprüfen, ob ein Wert im Eingabefeld vorhanden ist, und den Stil oder die Eingabeaufforderungsinformationen des Eingabefelds ändern basierend darauf, ob es einen Wert gibt.

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 = "";
  }
}

Im obigen Code erhalten wir zuerst das DOM-Objekt des Eingabefelds und ändern dann den Stil oder die Eingabeaufforderungsinformationen des Eingabefelds, indem wir feststellen, ob der Wert des Eingabefelds leer ist. Wenn das Eingabefeld leer ist, setzen wir die Rahmenfarbe des Eingabefelds auf Rot und fügen die Eingabeaufforderung „Dieses Element darf nicht leer sein“ hinter dem Eingabefeld ein. Wenn das Eingabefeld nicht leer ist, setzen wir die Rahmenfarbe auf Grün , und löschen Sie die Eingabeaufforderungsinformationen.

3. Wenden Sie die Validierungsfunktion auf alle Eingabefelder an.
   Abschließend müssen wir die checkEmpty-Funktion auf alle Eingabefelder anwenden, die eine Validierung erfordern. In der tatsächlichen Entwicklung markieren wir häufig die Eingabefelder, die überprüft werden müssen, mit einer Klasse, verwenden dann die Methode document.getElementsByClassName(), um alle mit dieser Klasse markierten Eingabefelder abzurufen, durchlaufen dann eine Schleife und rufen die Funktion checkEmpty erneut auf.

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

Im obigen Code verwenden wir zunächst die Methode document.getElementsByClassName("erforderlich"), um alle Eingabefelder abzurufen, die überprüft werden müssen, und verwenden dann die Schleifendurchquerung, um bei Auftreten des Ereignisses Oninput-Ereignisse für alle Eingabefelder hinzuzufügen ausgelöst wird, wird die checkEmpty-Funktion zur Überprüfung ausgeführt.

Zusammenfassung:
Durch die oben genannten drei Schritte können wir eine einfache, JavaScript-basierte Überprüfung in Echtzeit implementieren, um sicherzustellen, dass das Eingabefeld nicht leer ist. Natürlich können in der tatsächlichen Entwicklung komplexere Formularvalidierungsanforderungen auftreten. Möglicherweise möchten Sie das obige Beispiel als Grundlage verwenden und entsprechende Verbesserungen basierend auf der Geschäftslogik vornehmen.

Das obige ist der detaillierte Inhalt vonSo beurteilen Sie in Echtzeit mit Javascript, ob es leer ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!