Verwenden Sie JQuery, um die E-Mail-Überprüfung zu implementieren

Im heutigen digitalen und vernetzten Zeitalter ist E-Mail zu einem unverzichtbaren Bestandteil unseres täglichen Lebens geworden. Daher ist die Implementierung der E-Mail-Validierung (E-Mail-Validierung) zu einer notwendigen Fähigkeit für Entwickler geworden, die Webanwendungen schreiben. In diesem Artikel stellen wir vor, wie Sie die E-Mail-Verifizierung mit jQuery implementieren.

1. Vorausgesetzte Kenntnisse

Bevor wir mit der Diskussion über die Verwendung von jQuery zur Implementierung der E-Mail-Verifizierung beginnen, müssen wir einige allgemeine Regeln für E-Mail-Adressen kennen. Eine E-Mail-Adresse besteht aus zwei Hauptteilen: dem Benutzernamen und dem Domänennamen, getrennt durch das „@“-Symbol. Der Benutzername kann Buchstaben, Zahlen, Punkte (.) und Unterstriche (_) enthalten und mit Buchstaben oder Zahlen beginnen, jedoch nicht mit Punkten oder Unterstrichen. Der Domainname muss einen Punkt enthalten und der letzte Teil muss ein aus zwei bis sechs Buchstaben bestehender alphanumerischer Code sein (z. B. .com oder .cn).

2. Anforderungsanalyse

Bevor wir mit dem Schreiben von Code beginnen, müssen wir unsere Bedürfnisse und Ziele klären. In diesem Fall müssen wir die folgenden Aspekte implementieren:

(1) Wenn der Benutzer die E-Mail-Adresse eingibt, muss diese gemäß den oben genannten Regeln überprüft werden.

(2) Bevor der Benutzer versucht, das Formular abzusenden, muss die E-Mail-Adresse auf Gültigkeit überprüft werden.

(3) Wenn die E-Mail-Adresse ungültig ist, muss eine Fehlermeldung angezeigt werden.

3. Code schreiben

Jetzt können wir mit dem Schreiben von Code beginnen. Zuerst müssen wir im HTML-Code ein Eingabefeld erstellen und ihm eine Klasse hinzufügen, um es als das Eingabefeld für die E-Mail-Adresse zu identifizieren, das wir überprüfen möchten:

<label for="email">电子邮件地址：</label>
<input type="text" name="email" id="email" class="email-input">
<span class="email-error">请输入一个有效的电子邮件地址。</span>

Im obigen Code verwenden wir das Element „label“, um es bereitzustellen Fügen Sie der Eingabe eine Beschriftung zum Feld hinzu und verknüpfen Sie sie mit dem Element „Eingabe“. Wir haben dem Eingabefeld außerdem den Klassennamen „email-input“ hinzugefügt, damit wir ihn später im jQuery-Code referenzieren können. Der HTML-Code für das Fehlermeldungsfeld sieht folgendermaßen aus:

<span class="email-error">请输入一个有效的电子邮件地址。</span>

Im obigen Code verwenden wir das „span“-Element, um das Fehlermeldungsfeld zu definieren und verknüpfen es dann mit einem Klassennamen „email-error“. Standardmäßig sollten Fehlermeldungsfelder ausgeblendet sein (display:none).

Jetzt können wir mit dem Schreiben von jQuery-Code beginnen. Wir unterteilen den Code in zwei Teile: die Verifizierungsfunktion und die Verifizierungsauslösefunktion.

3.1 Validierungsfunktion

Wir müssen eine Funktion namens „validateEmail“ schreiben, um die E-Mail-Adresse zu überprüfen. In dieser Funktion verwenden wir einen regulären Ausdruck, um zu prüfen, ob die E-Mail-Adresse den oben genannten Regeln entspricht:

function validateEmail(email) {
    var re = /^[w-.]+@([w-]+.)+[w-]{2,6}$/;
    return re.test(email);
}

Im obigen Code verwenden wir den regulären Ausdruck „/^[w-.]+@([w-]+ . )+[w-]{2,6}$/" um die E-Mail-Adresse zu bestätigen. Der reguläre Ausdruck enthält die folgenden Teile:

(1)^: Gibt an, dass die Zeichenfolge mit dem Anfangsteil ihres regulären Ausdrucks beginnen muss.

(2)[w-.]+: Stellt den Benutzernamenteil der E-Mail-Adresse dar. Enthält Buchstaben, Zahlen, Punkte und Unterstriche. Da der Punkt in regulären Ausdrücken eine besondere Bedeutung hat, muss er durch einen vorangehenden Backslash maskiert werden.

(3) @: Stellt das Trennzeichen zwischen dem Benutzernamen und dem Domänennamen der E-Mail-Adresse dar.

(4)([w-]+.)+: Stellt den Domänennamenteil der E-Mail-Adresse dar. Enthält eine oder mehrere aufeinanderfolgende Kombinationen aus Buchstaben, Zahlen, Bindestrichen und Punkten. Da das „+“-Symbol außerhalb der Klammern steht, muss mindestens eine Kombination übereinstimmen.

(5)[w-]{2,6}: Stellt den letzten Teil der E-Mail-Adresse dar (auch als Top-Level-Domain-Name oder TLD bekannt). Es muss eine Kombination aus zwei bis sechs Buchstaben oder Zahlen sein. Da verschiedene Länder unterschiedliche TLDs verwenden, wird hier der Bereich {2,6} verwendet.

(6)$: Gibt an, dass die Zeichenfolge mit dem Endteil ihres regulären Ausdrucks enden muss.

Nachdem die E-Mail-Adresse an die Funktion „validateEmail“ übergeben wurde, führt die Funktion den regulären Ausdruck aus und gibt „true“ oder „false“ zurück, um anzugeben, ob die Adresse gültig ist.

3.2 Triggerfunktion validieren

Jetzt müssen wir eine Funktion namens „validateEmailField“ schreiben, um die E-Mail-Adresse zu validieren und bei Bedarf das Fehlermeldungsfeld anzuzeigen oder auszublenden:

function validateEmailField() {
    var emailInput = $('#email');
    var emailError = $('.email-error');
    if (validateEmail(emailInput.val())) {
        emailError.hide();
    } else {
        emailError.show();
    }
}

Im obigen Code verwenden wir zunächst jQuery-Selektoren, um Holen Sie sich Eingabefelder und Fehlermeldungsfelder. Anschließend rufen wir die Funktion „validateEmail“ auf, um zu prüfen, ob die E-Mail-Adresse gültig ist. Wenn die E-Mail-Adresse gültig ist, wird das Fehlermeldungsfeld ausgeblendet. Andernfalls wird dieses Meldungsfeld angezeigt.

Jetzt müssen wir auch einen Listener zum Eingabefeld hinzufügen, um die Validierung automatisch auszulösen, wenn der Benutzer die E-Mail-Adresse eingibt:

$('.email-input').on('keyup', function() {
    validateEmailField();
});

Im obigen Code verwenden wir den jQuery-Listener, um die Eingabe des Benutzers in das Eingabefeld zu überwachen Geben Sie eine beliebige Taste ein und rufen Sie dann die Funktion „validateEmailField“ auf, um die eingegebene E-Mail-Adresse zu validieren.

Wenn wir schließlich alle Eingabefelder validieren möchten, bevor das Formular gesendet wird, können wir den folgenden Code hinzufügen:

$('form').submit(function() {
    var emailInput = $('#email');
    var emailError = $('.email-error');
    if (!validateEmail(emailInput.val())) {
        emailError.show();
        return false;
    }
    return true;
});

Im obigen Code haben wir einen Listener hinzugefügt, um das Formularübermittlungsereignis zu überwachen und dann zu überprüfen, ob die E-Mail gesendet wird Adresse effizient. Wenn die E-Mail-Adresse ungültig ist, wird ein Fehlermeldungsfeld angezeigt und „false“ zurückgegeben, um das Absenden des Formulars zu verhindern. Andernfalls wird das Formular abgesendet.

4. Fazit

In diesem Artikel haben wir gezeigt, wie man die E-Mail-Adressüberprüfung mit jQuery implementiert. Wir haben reguläre Ausdrücke verwendet, um das Format der E-Mail-Adresse zu überprüfen, und zwei JavaScript-Funktionen geschrieben, um den Überprüfungsprozess abzuschließen. Schließlich haben wir auch gezeigt, wie man die E-Mail-Adressvalidierung in ein Webformular integriert, um die Gültigkeit der Benutzereingaben sicherzustellen. Diese Techniken sind in vielen Webanwendungen sehr nützlich. Wir empfehlen Ihnen daher, sie zu beherrschen, um Ihre Webentwicklungsfähigkeiten zu verbessern.

Das obige ist der detaillierte Inhalt vonVerwenden Sie JQuery, um die E-Mail-Überprüfung zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!