Das JavaScript-Formular ist leer und kann nicht gesendet werden

Mit der Entwicklung des Internets sind Webformulare zu einer wichtigen Methode der Netzwerkkommunikation geworden. Sie werden nicht nur für die Anmeldung auf Websites, die Registrierung, Nachrichten und andere Funktionen verwendet, sondern werden auch häufig bei verschiedenen Online-Transaktionen, Umfragen und Feedback verwendet. Um die Richtigkeit und Vollständigkeit der Daten sicherzustellen, ist es besonders wichtig, die Rechtmäßigkeit des Formulars zu überprüfen. In diesem Artikel wird hauptsächlich erläutert, wie Sie mithilfe von JavaScript die Funktion implementieren, dass das Formular nicht gesendet werden kann, wenn es leer ist.

1. Der Hintergrund des Formulars ist leer und kann nicht übermittelt werden

Formulardaten sind ein wichtiger Datenträger für die Kommunikation zwischen der Website und den Benutzern. Die Richtigkeit und Rechtmäßigkeit ihrer Daten stehen in direktem Zusammenhang mit der Sicherheit der Website der normale Geschäftsbetrieb. Daher ist die Formularüberprüfung eine der grundlegendsten Sicherheitsanforderungen bei der Website-Entwicklung. Die Formularverifizierung kann grundsätzlich in zwei Methoden unterteilt werden: serverseitige Verifizierung und clientseitige Verifizierung.

Die serverseitige Formularüberprüfung überprüft im Allgemeinen die Formulardaten, bevor sie an das Hintergrundskript (z. B. PHP, ASP, JSP usw.) gesendet werden. Diese Methode kann im Allgemeinen die Rechtmäßigkeit und Sicherheit der Daten erkennen, erfordert jedoch die Übertragung von Daten Das Stellen einer zusätzlichen Netzwerkanforderung führt zu einem gewissen Leistungsaufwand und beeinträchtigt die Benutzererfahrung.

Die clientseitige Überprüfung führt im Allgemeinen eine Formularüberprüfung auf dem Client über JavaScript-Skripte durch. Benutzer können eine Überprüfung durchführen, bevor sie das Formular absenden, wodurch der Aufwand für mehrere Netzwerkanfragen vermieden und die Benutzererfahrung verbessert wird. Die clientseitige Überprüfung birgt jedoch gewisse Risiken, da Benutzer JavaScript-Skripte deaktivieren können, wodurch die Überprüfung ungültig wird. Daher wird sie nur als grundlegende Hilfsmethode zur Überprüfung verwendet.

Bei der clientseitigen Überprüfung besteht eine häufige Anforderung darin, dass das Formular nicht erfolgreich übermittelt werden kann, wenn es einen Nullwert enthält. Dadurch kann effektiv verhindert werden, dass Benutzer unvollständige Daten übermitteln oder Fehlbedienungen durchführen, die zu falschen Daten führen. Die spezifische Implementierungsmethode wird im Folgenden vorgestellt.

2. Der Implementierungsprozess zur Verhinderung der Übermittlung des Formulars, wenn es leer ist.

Bei der Implementierung der Funktion zur Verhinderung der Übermittlung des Formulars, wenn es leer ist, müssen Sie zunächst einige Formularattribute und -methoden in JavaScript-Skripten verstehen. die im Folgenden vorgestellt werden.

1. Formularattribute

Es gibt einige wichtige Attribute im Formular, die in JavaScript verwendet werden können, darunter hauptsächlich die folgenden:

(1) form.elements: Array von Formularelementen, Sie können Verweise auf alle Elemente erhalten des Formulars.

(2) form.length: Die Anzahl der Formularelemente ist im Verifizierungsformular wichtiger.

(3) form.action: Adresse für die Formularübermittlung.

(4) form.method: Formularübermittlungsmethode, derzeit gibt es zwei Hauptmethoden: GET und POST.

2. Formularmethoden

Formularmethoden sind im Allgemeinen Funktionen in JavaScript-Skripten, die Formulare bearbeiten, einschließlich der folgenden:

(1) subscribe(): Formular absenden

(2) reset(): Formular zurücksetzen

(3) resetForm(): Zurücksetzen des Formulars

(4) checkValidity(): Überprüfen Sie die Rechtmäßigkeit des Formulars

(5) reportValidity(): Anzeigen der Überprüfungsergebnisse

3. Formularelementattribute und -methoden

Formularelementattribute und -methoden werden hauptsächlich durch Verweise auf Formularelemente verwendet, einschließlich der folgenden:

(1) element.value: der Wert des Elements

(2) element.type: der Typ des Elements

(3 ) element .checked: Der aktivierte Zustand des Optionsfelds oder Kontrollkästchens

(4) element.defaultValue: Der Standardwert des Elements

(5) element.focus(): Das Element erhält den Fokus

(6) element.blur(): Das Element verliert den Fokus

Um die Funktion zu implementieren, dass das Formular nicht gesendet werden kann, wenn es leer ist, können Sie die folgenden Schritte in JavaScript ausführen.

1. Formularelemente abrufen

Zuerst müssen Sie die Formularelemente abrufen, die überprüft werden müssen. Verwenden Sie form.elements.length und form.elements[i], um die Anzahl der Formularelemente und die entsprechenden Formularelementreferenzen abzurufen.

2. Bestimmen Sie die Formularelemente.

Durchlaufen Sie die Formularelemente und bestimmen Sie, ob der Wert jedes Elements leer ist. Brechen Sie den Übermittlungsvorgang ab, andernfalls fahren Sie mit dem Übermittlungsvorgang fort.

Der Code lautet wie folgt:

function checkForm(form) {
    for (var i = 0; i < form.elements.length; i++) {
        var element = form.elements[i];
        if (element.value == "") {
            alert(element.name + "不能为空！");
            element.focus();
            return false;
        }
    }
    return true;
}

In diesem Beispiel wird eine for-Schleife verwendet, um alle Elemente im Formular zu durchlaufen und festzustellen, ob der Wert jedes Formularelements leer ist. Wenn es leer ist, wird ein Eingabeaufforderungsfeld angezeigt up und ein falscher Wert wird zurückgegeben, was darauf hinweist, dass das Formular nicht gesendet werden kann. Wenn kein Nullwert vorhanden ist, wird true zurückgegeben, d. h. das Formular kann gesendet werden. Gleichzeitig wird die Methode element.focus() aufgerufen, um dafür zu sorgen, dass der Fokus des Benutzers sofort auf dem Eingabefeld bleibt, was es dem Benutzer erleichtert, Fehler zu korrigieren.

Registrieren Sie abschließend das onsubmit-Ereignis für das Formular und rufen Sie die Funktion checkForm() auf.

<form id="myForm" action="submit.php" method="post" onsubmit="return checkForm(this);">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>

3. Zusammenfassung

JavaScript ist eine sehr wichtige Skriptsprache in der Webentwicklung. Durch die Verwendung von JavaScript können Sie umfangreiche Funktionen wie Formularvalidierung, Stilanhänge und DOM-Operationen erreichen.

In diesem Artikel wird ausführlich beschrieben, wie Sie mithilfe von JavaScript die Funktion implementieren, dass das Formular nicht gesendet werden kann, wenn es leer ist. Er umfasst hauptsächlich die Schritte zum Abrufen von Formularelementen, zum Durchlaufen der Formularelemente und zur Beurteilung, ob sie leer sind, sowie zum Registrieren von Onsubmit Ereignis für das Formular usw. Wir hoffen, dass es für Webentwickler hilfreich sein wird. Gleichzeitig ist zu beachten, dass bei der Verwendung von JavaScript zur Überprüfung der Form Faktoren wie Sicherheit und Benutzererfahrung sorgfältig berücksichtigt werden müssen, um die Integrität und Rechtmäßigkeit der Daten sicherzustellen.

Das obige ist der detaillierte Inhalt vonDas JavaScript-Formular ist leer und kann nicht gesendet werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!