Input ist eines der häufigsten Elemente von Webformularen, und die Überprüfung auf Vollständigkeit ist eine der Hauptaufgaben eines Webentwicklers. Eine Nichteinhaltung der Anforderungen kann zu falschen Daten oder Fehlern bei der Verarbeitung der Informationen führen. In diesem Artikel werden wir detaillierte Anweisungen zum Überprüfen der Eingabe auf Vollständigkeit mit JavaScript erläutern.
Um zu beginnen, schauen wir uns an, wie man auf das Input-Element auf einer Webseite zugreift. Dazu verwenden wir die document-Methode.getElementById(), mit dem wir ein Element anhand seiner eindeutigen ID abrufen können. Wenn wir beispielsweise eine input mit haben, können wir wie folgt darauf zugreifen:
var input = document.getElementById("name");
Als nächstes verwenden wir die value-Eigenschaft des input-Elements, um zu überprüfen, ob die input gefüllt ist. Wenn value leer ist, wird input als leer betrachtet. So wird die Überprüfung aussehen:
Warum muss ich input auf Vollständigkeit überprüfen
Außerdem hilft die Überprüfung von input auf Vollständigkeit, die Datensicherheit zu gewährleisten. Wenn bestimmte Felder ausgefüllt werden sollen, wird dadurch vermieden, dass unvollständige oder falsche Daten an den Server gesendet werden.
Eine solche Überprüfung kann auch hilfreich sein, um die Datenqualität zu verbessern. Wenn das Feld ein bestimmtes Format wie eine E-Mail-Adresse oder eine Telefonnummer enthalten muss, stellt die Eingabe-Überprüfung sicher, dass die Daten mit dem angegebenen Format übereinstimmen.
Am Ende hilft die Überprüfung der Eingabe auf Vollständigkeit, die Genauigkeit, Vollständigkeit und Integrität der Daten zu gewährleisten, Fehler zu reduzieren und die Erfahrung des Benutzers zu verbessern.
Grundlegende Methoden zur Überprüfung der Input-Füllung
1. Methode zur Überprüfung auf einen leeren Wert:
Eine der einfachsten Möglichkeiten, eine Eingabe auf Vollständigkeit zu überprüfen, besteht darin, ihren Wert auf eine leere Zeichenfolge zu überprüfen. Dazu können Sie einen bedingten Ausdruck verwenden, der überprüft, ob der input-Wert einer leeren Zeichenfolge entspricht:
if (input.value === '') else 2. Methode zur Überprüfung auf Zeichen:
Eine andere Möglichkeit, den input auf Vollständigkeit zu überprüfen, besteht darin, die Länge seines Werts zu überprüfen. Wenn die Länge des Werts größer als Null ist, wird angenommen, dass das Feld ausgefüllt ist:
if (input.value.length > 0) else 3. Methode zur Überprüfung auf Leerzeichen:
Die dritte Methode zur Überprüfung der Input-Füllung besteht darin, nur nach Leerzeichen zu suchen. Dazu können Sie einen regulären Ausdruck verwenden:
if (/^\s*$/.test(input.value)) else Alle diese Methoden können zusammen oder separat verwendet werden, abhängig von den Anforderungen Ihres Webformulars. Vergessen Sie nicht, dass die korrekte Überprüfung von input auf Vollständigkeit dazu beiträgt, Fehler zu vermeiden und die Benutzererfahrung zu verbessern.
Methode 1: Verwenden der value-Eigenschaft
Um zu überprüfen, ob das Eingabefeld ausgefüllt ist, können wir den Wert seiner value-Eigenschaft mit einer leeren Zeichenfolge vergleichen:
// das Eingabefeld ist leer
// das Eingabefeld ist ausgefüllt
Wenn der Wert der value-Eigenschaft gleich einer leeren Zeichenfolge ist, bedeutet dies, dass das Eingabefeld nicht ausgefüllt wurde. Andernfalls gilt das Eingabefeld als ausgefüllt, wenn der Wert nicht gleich einer leeren Zeichenfolge ist.
Methode 2: Verwenden der trim() -Funktion
Sie können die Funktion trim() verwenden, um zu überprüfen, ob das Input-Feld mit JavaScript gefüllt ist. Die trim() -Methode entfernt alle Leerzeichen am Anfang und Ende einer Zeichenfolge. Wenn also der input-Wert nur aus Leerzeichen besteht, erhalten wir nach der Anwendung der trim() -Funktion eine leere Zeichenfolge.
var input = document.getElementById("myInput").value;
var trimmedInput = input.trim();
alert("Das Feld ist nicht ausgefüllt!");
In diesem Beispiel überprüft die checkInput() -Funktion, wenn Sie auf die Schaltfläche "Prüfen" klicken, den Wert des Eingabefeldes auf Vollständigkeit. Wenn das Feld nicht ausgefüllt ist, wird die Meldung "Feld ist nicht ausgefüllt!". Andernfalls wird die Meldung "Das Feld ist ausgefüllt!".
Die Verwendung der Funktion trim() ermöglicht eine flexiblere Überprüfung der Fülle des Input-Felds, da Leerzeichen am Anfang und Ende der Zeile nicht berücksichtigt werden.
Methode 3: Verwenden des required-Attributs
Der Vorteil dieser Methode liegt in ihrer Einfachheit. Sie müssen keinen zusätzlichen JavaScript-Code schreiben, um die Felder zu validieren, da dies bereits vom Browser bereitgestellt wird. Beachten Sie jedoch, dass diese Methode keine Überprüfung auf die Gültigkeit der Daten durchführt, sondern nur überprüft, ob das Feld ausgefüllt ist.
Beispiel für die Verwendung des Attributs required:
Im obigen Beispiel ist ein Eingabefeld mit der ID "name" erforderlich, das ausgefüllt werden muss. Wenn ein Benutzer versucht, ein Formular zu senden, ohne dieses Feld auszufüllen, zeigt der Browser eine Fehlermeldung an und blockiert das Senden des Formulars.
Wie füge ich einen visuellen Effekt hinzu, wenn ich die Fülle von input überprüfe
Wenn Sie die Fülle von input auf einer Webseite mit JavaScript überprüfen, können Sie einen visuellen Effekt hinzufügen, mit dem der Benutzer wissen kann, dass das Feld ausgefüllt werden muss.
Dazu können Sie verschiedene JavaScript-Methoden und -Eigenschaften verwenden, z. B. das Hinzufügen einer Klasse oder das Ändern der Hintergrundfarbe.
Eine Möglichkeit besteht darin, der input eine Klasse hinzuzufügen, die ihr Aussehen ändert. Beispielsweise können Sie der input-Klasse "empty" hinzufügen, wenn sie leer ist, und sie mit CSS formatieren. Auf diese Weise wird dem Benutzer sofort klar, dass das Feld ausgefüllt werden muss.
Eine andere Möglichkeit besteht darin, die Hintergrundfarbe von input bei einem leeren Wert zu ändern. Sie können beispielsweise die Hintergrundfarbe auf Rot einstellen, wenn das Feld leer ist, und auf Weiß, wenn das Feld voll ist. Auf diese Weise ist es für den Benutzer einfacher zu bemerken, dass das Feld ausgefüllt werden muss.
Sie können auch andere visuelle Effekte wie Animationen oder Quickinfos verwenden, um dem Benutzer maximale Informationen über die Fülle von Feldern auf einer Webseite zu geben.
Es ist wichtig, sich daran zu erinnern, dass die Visuals intuitiv sein sollten und den Benutzer nicht daran hindern, das Formular auszufüllen. Sie sollten dem Benutzer nur helfen, die erforderlichen Informationen schneller und einfacher auszufüllen.
Beispielcode für die Eingabe-Überprüfung auf Vollständigkeit
Sie können verschiedene Methoden verwenden, um die Fülle von input mit JavaScript zu überprüfen. Ein Beispielcode ist unten:
function checkInput() return true;>Sie können diesen Code auf Ihr Formular anwenden, indem Sie einfach die korrekte ID des input-Felds in der getElementById() -Funktion angeben und die checkInput() -Funktion zum richtigen Zeitpunkt aufrufen. Dieses Beispiel ist nur eine von vielen Möglichkeiten, die Fülle von Input mit JavaScript zu überprüfen, und Sie können es verwenden oder nach Belieben ändern.
