Heim >Web-Frontend >Front-End-Fragen und Antworten >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.
<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.
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.
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!