So richten Sie ein Formular in Javascript ein-Front-End-Fragen und Antworten-php.cn

So richten Sie ein Formular in Javascript ein

PHPz

Freigeben： 2023-04-21 09:18:31

Original

751 Leute haben es durchsucht

Mit der Entwicklung der Web-Technologie und ihrer Anwendung in immer mehr Szenarien sind Formulare zu einem unverzichtbaren Element der Web-Entwicklung geworden. Mithilfe von Formularen können vom Benutzer eingegebene Daten erfasst werden, was für viele Webanwendungen sehr wichtig ist. Wenn der Nutzer das Formular ausfüllt und absendet, müssen wir diese Daten verarbeiten. Dabei spielt JavaScript eine Schlüsselrolle.

In diesem Artikel wird erläutert, wie Sie Formulare mit JavaScript einrichten, und es werden einige gängige Tipps und Techniken erläutert.

Grundlegendes Formular

Werfen wir zunächst einen Blick auf ein einfaches HTML-Formular. Das Folgende ist der HTML-Code eines einfachen Formulars:

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">年龄：</label>
  <input type="number" id="age" name="age" required><br><br>

  <input type="submit" value="提交">
</form>

Nach dem Login kopieren

Das obige Formular enthält drei erforderliche Felder: Name, E-Mail-Adresse und Alter sowie eine Schaltfläche zum Senden. Wenn eines der Elemente nicht ausgefüllt ist, wird ein Eingabeaufforderungsfeld angezeigt, in dem der Benutzer aufgefordert wird, das Element auszufüllen.

Formularwerte festlegen

Das Festlegen eines Formularwerts mithilfe von JavaScript kann folgendermaßen erfolgen:

document.getElementById("name").value = "John";

Nach dem Login kopieren

Der obige Code legt „John“ als Standardwert für den Vornamen fest. Wir können Werte im Formular auch dynamisch auf diese Weise festlegen:

document.getElementById("name").value = userName;

Nach dem Login kopieren

In diesem Fall ist „userName“ eine Variable, deren Wert auf andere Weise abgerufen werden kann, beispielsweise aus einer Datenbank oder einem anderen Webdienst.

Formularwert abrufen

Sie können den Wert des Formulars über den folgenden Code abrufen:

let nameValue = document.getElementById("name").value;
let emailValue = document.getElementById("email").value;
let ageValue = document.getElementById("age").value;

Nach dem Login kopieren

Hier werden die Werte im Formular in drei Variablen gespeichert. Dies lässt sich komfortabel bei der Verarbeitung von Formulardaten nutzen.

Formularvalidierung

Die Formularvalidierung ist ein wichtiger Teil, der dazu beiträgt, die Website vor Angriffen böswilliger Benutzer zu schützen und die Gültigkeit und Genauigkeit der Formulardaten sicherzustellen.

Hier sind einige gängige Formularvalidierungstechniken:

Pflichtfeldvalidierung: In Formularen erfordern Pflichtfelder häufig eine obligatorische Validierung. Im obigen Beispiel sind beispielsweise Name, E-Mail-Adresse und Alter Pflichtfelder. Um sicherzustellen, dass der Benutzer die erforderlichen Felder ausgefüllt hat, verwenden wir das Attribut „erforderlich“. Wenn der Benutzer ein Formular sendet, ohne die erforderlichen Felder auszufüllen, warnt der Browser den Benutzer, bevor die Übermittlung fehlschlägt.
E-Mail-Verifizierung: In vielen Webanwendungen müssen wir sicherstellen, dass die vom Benutzer eingegebene E-Mail-Adresse gültig ist. Zur Validierung von E-Mail-Adressen verwenden wir reguläre Ausdrücke.

Hier ist ein Beispiel für die Validierung einer E-Mail-Adresse in JavaScript:

function validateEmail(email) {
  var re = /\S+@\S+\.\S+/;
  return re.test(email);
}

Nach dem Login kopieren

Im obigen Code haben wir einen einfachen regulären Ausdruck verwendet, der das Format der E-Mail-Adresse validiert.

Formularübermittlung: Wenn das Formular eine Übermittlungsanfrage erhält, müssen wir die Formulardaten validieren. Dies kann erreicht werden, indem das Ereignis „onsubmit“ auf der Schaltfläche „Senden“ gesetzt wird.

Hier ist der JavaScript-Code, der die Validierungsfunktion mit dem Formularübermittlungsereignis verknüpft:

document.getElementById("myForm").onsubmit = function() {
  if (!validateForm()) {
    return false;
  }
};

Nach dem Login kopieren

Der obige Code validiert das Formular, bevor es übermittelt wird. Wenn die Validierung fehlschlägt, wird das Formular nicht gesendet.

Sofortige Nachricht: Wenn die Daten im Formular ungültig sind, müssen wir dem Benutzer normalerweise eine sofortige Nachricht über das Problem anzeigen. Dies kann durch Hinzufügen von Elementen zum Formular erreicht werden, beispielsweise durch Hinzufügen eines
-Elements namens „errorText“.

Hier ist ein JavaScript-Code, der dem Benutzer eine Fehlermeldung anzeigt, wenn die Formularvalidierung fehlschlägt:

function showErrorMessage(field, message) {
  var errorText = document.createElement("div");
  errorText.className = "error";
  errorText.innerHTML = message;
  field.parentNode.insertBefore(errorText, field.nextSibling);
}

Nach dem Login kopieren

Im obigen Code haben wir JavaScript verwendet, um ein

-Element mit dem Namen „errorText“ zu erstellen und es einzufügen vor dem nächsten gleichgeordneten Element des fehlgeschlagenen Formularfelds.

Zusammenfassung

In diesem Artikel haben wir kurz die Funktion von JavaScript beim Einrichten von Formularen vorgestellt, einige gängige Techniken zur Formularvalidierung vorgeschlagen und erklärt, wie Eingabeaufforderungen vor dem Absenden des Formulars validiert und veröffentlicht werden. Mithilfe dieser Technologien können wir erweiterte Interaktionen und Datenverarbeitung in unseren Formularanwendungen implementieren und so die Sicherheit und Gültigkeit der Benutzereingabedaten gewährleisten.

Das obige ist der detaillierte Inhalt vonSo richten Sie ein Formular in Javascript ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!