Einleitung

Ob Sie es bemerken oder nicht, Daten sind zu einem entscheidenden Bestandteil unseres täglichen Lebens geworden. Von der Online-Futterbestellung bis zur Suche nach Katzenfutter senden und empfangen wir ständig Daten. Als Entwickler von Webanwendungen liegt es in unserer Verantwortung sicherzustellen, dass Benutzereingaben im angegebenen Format vorliegen, damit die Datenbank die Daten richtig versteht und die Anwendung robust bleibt.

Die Telefonnummernvalidierung ist wichtig, da sie sicherstellt, dass die Daten in der gesamten Datenbank in einem einheitlichen Format gespeichert werden. Beispielsweise müssen Benutzer möglicherweise klären, ob sie die Landesvorwahl vor ihrer Telefonnummer eingeben sollten. Mit einer ordnungsgemäßen Validierung können Benutzer leicht feststellen, ob sie erforderlich ist. Ebenso verbessert sich die Benutzererfahrung durch ein konsistentes Format, da Sie wissen, was Sie von Benutzern erwarten können, und die Logik entsprechend implementieren können. Es wäre eine schlechte Erfahrung für Benutzer, wenn der Code zu einem späteren Zeitpunkt aufgrund inkonsistenter Daten kaputt gehen würde.

Reguläre Ausdrücke sind leistungsstarke Werkzeuge für den Mustervergleich. Sie bieten die Flexibilität, je nach Anwendungsfall Muster unterschiedlicher Art abzugleichen. Darüber hinaus sind reguläre Ausdrücke sprachunabhängig, wodurch Ihre Validierungslogik tragbarer wird, da Sie die Kernvalidierung problemlos integrieren können. Die Arbeit mit Regex in JavaScript ist eine unkomplizierte Aufgabe.

Dieser Artikel hilft Ihnen zu verstehen, wie Sie die Leistungsfähigkeit regulärer Ausdrücke nutzen können, um Telefonnummern für Ihre Anwendung zu validieren. Sie schreiben eine einfache JavaScript-Funktion, um Telefonnummern mit Ländervorwahlen zu validieren.

Was ist ein regulärer Ausdruck?

Vereinfacht ausgedrückt entspricht ein regulärer Ausdruck einem vordefinierten Muster in einer bestimmten Zeichenfolge. Es wird häufig in Programmiersprachen verwendet und hauptsächlich zur Validierung von Eingaben eines bestimmten Formats verwendet. Darüber hinaus werden reguläre Ausdrücke häufig zum Suchen, Teilen und Ersetzen bestimmter Muster verwendet.

Nehmen wir an, Sie möchten eine E-Mail-Adresse in einem Dokument finden. Die E-Mail-Adresse kann eine beliebige Adresse sein, keine bestimmte. Wenn Sie einen einfachen Ausdruck schreiben, können Sie das Muster schnell finden, da Sie die Struktur einer E-Mail-Adresse bereits kennen.

Ein regulärer Ausdruck verwendet Sonderzeichen, um verschiedene Arten von Mustern zu kennzeichnen. Zum Beispiel:

• . (Punkt) ist ein Sonderzeichen, das mit jedem Zeichen übereinstimmen kann.
• * (Sternchen) stimmt mindestens 0 Mal mit dem vorhergehenden Zeichen überein.
• + (Plus) stimmt mindestens einmal mit dem vorhergehenden Zeichen überein.
• ? (Fragezeichen) macht das vorangehende Zeichen optional.
• [abc] passt zu einem der Zeichen a, b, oder c.
• (abc) gruppiert Charaktere.
• ^ (Caret) entspricht dem Zeilenanfang.
• $ (Dollar) entspricht dem Ende der Zeile.

Dies sind nur einige davon. Wenn Sie tiefer eintauchen und mehr über Muster erfahren möchten, können Sie hier nachschlagen dieses Dokument von Microsoft.

Erstellen wir einen regulären Ausdruck, der prüft, ob es sich bei einem bestimmten Zahlensatz um eine fünfstellige Postleitzahl handelt. Um mit dem Schreiben des Ausdrucks zu beginnen, verwenden wir das ^ (Caret-)Zeichen, da es mit dem Zeilenanfang übereinstimmt. In einem regulären Ausdruck d entspricht einer beliebigen Ziffer und einer Zahl in geschweiften Klammern ({}) stimmt mit dem vorhergehenden Element genau so oft überein, wie in den geschweiften Klammern angegeben. Aus der obigen Liste wissen wir das $ wird zum Anpassen des Zeilenendes verwendet.

Wenn wir diese Informationen kombinieren, erhalten wir einen regulären Ausdruck wie diesen:

/^d{5}$/

Schauen wir uns nun die Grafik unten an, um den Ausdruck besser zu verstehen.

Regulärer Ausdruck zur Übereinstimmung mit der fünfstelligen Postleitzahl

Nachdem wir nun ein grundlegendes Verständnis regulärer Ausdrücke und ihres allgemeinen Aufbaus haben, ist es an der Zeit, zu untersuchen, wie diese Ausdrücke in einer JavaScript-Funktion implementiert werden können.

Reguläre JavaScript-Ausdrücke

JavaScript ist die beliebteste Programmiersprache unter Entwicklern. Da fast alle Webanwendungen JavaScript erfordern, ist es wichtig zu verstehen, wie reguläre Ausdrücke in dieser Sprache verwendet werden können.

In JavaScript wird die RegExp Das Objekt wird für den Mustervergleich verwendet. Dieses Objekt kann auf zwei Arten genutzt werden:

• Verwendung der Literalschreibweise, bei der ein Muster zwischen zwei Schrägstrichen formatiert wird
• Unter Verwendung der Konstruktornotation, wobei entweder eine Zeichenfolge oder ein RegExp Objekt wird übergeben

Die wörtliche Notation kann so einfach verwendet werden:

const expr = /^d{5}$/i;

Bei der Konstruktornotation hingegen müssen Sie die verwenden RegExp Konstruktor, um eine Instanz davon zu erstellen. So sieht es aus:

const expr = new RegExp(/^d{5}$/, "i");

Weitere Informationen zum RegExp-Objekt finden Sie im offizielle MDN-Dokumente. Lassen Sie uns nun die Bedeutung der Telefonnummernvalidierung und die verschiedenen Komponenten einer Telefonnummer untersuchen.

Telefonnummernvalidierung und Komponenten

Beim Speichern von Telefonnummern in Ihrer Datenbank ist die Validierung von Telefonnummern auf der Clientseite von entscheidender Bedeutung. Ohne ordnungsgemäße Validierung kann Ihr Code unerwartetes Verhalten zeigen.

Angenommen, Sie nutzen einen Dienst, der neben der Telefonnummer auch die Landesvorwahl erfordert, Ihre Benutzer geben diese jedoch aufgrund mangelnder Validierung nicht an. Jetzt haben Sie nur noch die Nummer ohne B. die Landesvorwahl, und ein Dienst, der SMS-Textnachrichten sendet, könnte aus diesem Grund ausfallen. Dies ist nur ein hypothetisches Szenario. Andere Probleme können sogar zum Absturz Ihrer Anwendung führen. Es ist von entscheidender Bedeutung, Ihre Daten im Frontend ordnungsgemäß zu verarbeiten und sicherzustellen, dass Sie saubere und konsistente Daten in Ihrer gesamten Datenbank speichern.

Im Allgemeinen besteht eine Telefonnummer aus vier Teilen:

• Ländervorwahl: Die ersten 1 bis 3 Ziffern (je nach Land) definieren das Land der Telefonnummer. Mit diesem Code kann der Anruf in das richtige Land weitergeleitet werden. Ein Ländercode darf nicht mit einer 0 beginnen.

Der Artikel, den Sie gerade bearbeiten, trägt den Titel „Telefonnummern in JavaScript mit regulären Ausdrücken validieren“. Der zu bearbeitende Textabschnitt:

• Vorwahl: Dieser Teil der Nummer, auch Stadt- oder Vorwahl genannt, hilft dabei, den Anruf an das richtige geografische Gebiet innerhalb des Landes weiterzuleiten. In einigen Ländern, beispielsweise den Vereinigten Staaten, können Ortsvorwahlen auch eine bestimmte Gruppe von Telefonnummern für einen bestimmten Dienst angeben. Darüber hinaus darf in Nordamerika eine Vorwahl nicht mit einer 0 oder einer 1 beginnen.
• Telefonvorwahl: Diese Nummernfolge wird von der Telefongesellschaft einer bestimmten Zentrale oder Telefonzentrale zugewiesen und grenzt so das spezifische geografische Gebiet oder die Nachbarschaft weiter ein.
• Leitungsnummer: Dies ist die eindeutige Nummer, die der spezifischen Telefonleitung für einen Haushalt oder ein Unternehmen innerhalb des Vorwahlbereichs zugewiesen ist. Dieser Teil der Nummer stellt normalerweise sicher, dass jede Telefonnummer innerhalb eines Landes, einer Region und einer Vorwahl eindeutig ist.

Ohne die Landesvorwahl ergibt die Kombination der übrigen Teile eine zehnstellige Telefonnummer, bei der die Ortsvorwahl und die Telefonvorwahl jeweils dreistellig und die Leitungsnummer vierstellig ist.

Beginnen wir nun damit, eine JavaScript-Funktion zu schreiben, die eine Telefonnummer anhand dieser Kriterien mithilfe regulärer Ausdrücke validiert.

Erstellen Sie eine RegEx für die Telefonnummernvalidierung

Den Grundaufbau einer Telefonnummer haben wir bereits verstanden. Wir haben auch etwas über reguläre Ausdrücke und deren Verwendung in JavaScript gelernt. In diesem Abschnitt schreiben wir eine einfache JavaScript-Funktion, die Telefonnummern des angegebenen Formats validiert:

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

Eine gültige Telefonnummer für unsere Veranstaltung sieht beispielsweise so aus +123-456-789-1234, Aber nicht +012-123-456-7890 or +12-123-456-789, da diese Telefonnummern nicht den Regeln für Telefonnummern entsprechen, die wir zuvor besprochen haben.

Beginnen wir nun mit dem Schreiben des regulären Ausdrucks. Überprüfen wir zunächst, ob der Ländercode 1 bis 3 Ziffern lang ist und nicht mit einer Null beginnt.

Um den Anfang des regulären Ausdrucks anzugeben, verwenden Sie ein Caretzeichen (^), dann überprüfen Sie, ob am Anfang ein Plus vorhanden ist. Zu diesem Zweck verwenden wir +, was darauf hinweist, dass das Plus am Anfang vorhanden ist. Um nun sicherzustellen, dass die Ziffern des Ländercodes zwischen einer und drei Ziffern liegen und die erste Ziffer nicht Null ist, können wir etwa Folgendes schreiben: [1-9]{1}[0-9]{0,2}. Hier, [1-9]{1} gibt an, dass jede Ziffer von 1 bis 9 genau einmal existieren kann, und ähnlich gilt: [0-9]{0,2} gibt an, dass jede Ziffer von 0 bis 9 null bis zwei Mal vorkommen kann.

Als Trennzeichen können wir ein hinzufügen - (Bindestrich) zwischen den Abschnitten der Zahl. Eins - kann nach der Ländercode-Validierung hinzugefügt werden. An dieser Stelle sieht der reguläre Ausdruck also so aus:

^+[1-9]{1}[0-9]{0,2}-$

Das $ am Ende gibt das Ende der Zeile an. Für die Vorwahl wird dies nun ganz ähnlich sein. Eine Vorwahl darf nicht mit einer Null oder einer Eins beginnen. Der erste Teil wird also sein [2-9]{1}. Dies entspricht der Tatsache, dass die erste Zahl zwischen 2 und 9 liegt. Dieser Abgleich erfolgt einmal. Dann können wir den Rest des Codes schreiben [0-9]{2}. Dadurch wird sichergestellt, dass nach der ersten genau zwei Ziffern stehen und der Bereich für jede Ziffer zwischen 0 und 9 liegt. Fügen Sie am Ende erneut den Bindestrich als Trennzeichen hinzu.

Nun sieht der vollständige reguläre Ausdruck so aus:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|

Lassen Sie uns noch einmal dasselbe Muster zur Überprüfung der Telefonvorwahl verwenden. Nehmen wir an, dass die Telefonvorwahl ebenfalls nicht mit einer Null oder Eins beginnen kann. Also, hinzufügen [2-9]{1}[0-9]{2} und ein erneuter Bindestrich ergibt den Ausdruck wie folgt:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|

Jetzt bleibt nur noch die Zeilennummer übrig, die eine beliebige Ziffer mit einer Länge von genau vier sein kann. Dies ist einfacher als die anderen. Der Ausdruck ist [0-9]{4}.

Der vollständige Ausdruck lautet wie folgt:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|-Line-|

Sie haben sicher bemerkt, dass geschweifte Klammern häufig verwendet werden. Sie werden verwendet, um die in der Klammer bereitgestellten Instanzen abzugleichen. Wenn es sich um eine bestimmte Ziffer handelt, z {1}, wird es genau einmal mit dem vorherigen Muster übereinstimmen. Wenn es sich jedoch um einen Bereich handelt, z {0, 2}, es definiert die minimale und maximale Anzahl von Übereinstimmungen. Also im Fall von {0, 2}, wird das Muster mindestens null Mal und maximal zwei Mal übereinstimmen.

Das Muster ist fertig. Wir können jetzt eine einfache JavaScript-Funktion schreiben, um mithilfe des regulären Ausdrucks zu überprüfen, ob eine Telefonnummer gültig ist. Hier ist die Funktion:

function validatePhoneNumber(phoneNumber) { const pattern = new RegExp("^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$"); if (pattern.test(phoneNumber)) { console.log("Phone number is valid"); return true; } else { console.log("Phone number is not valid"); return false; }
} validatePhoneNumber("+123-456-789-1234"); validatePhoneNumber("+0-123-456-7890"); validatePhoneNumber("+12-012-123-1234"); 

Die Funktion ist recht einfach. Als Eingabe wird eine Telefonnummer benötigt. Das reguläre Ausdrucksmuster wird in einer Variablen namens gespeichert pattern. Das Muster wird mithilfe des RegExp-Konstruktors instanziiert und der Ausdruck als Parameter an den Konstruktor übergeben. Dann testen wir die Telefonnummer mit dem test Methode, die im Objekt verfügbar ist. Mithilfe einer if-else-Anweisung prüfen wir, ob die Telefonnummer den Test besteht. Wenn dies der Fall ist, geben wir true zurück und senden eine Konsolennachricht, die besagt, dass die Phone number is valid. Andernfalls wird „false“ zurückgegeben und eine Konsolenmeldung angezeigt, die besagt, dass die Telefonnummer ungültig ist.

Damit können wir loslegen. Jetzt können Sie Ihre Telefonnummern testen, um festzustellen, ob sie gültig sind.

Zusammenfassung

Ziel dieses Artikels war es, einen kurzen Überblick über reguläre Ausdrücke, ihre Verwendung und ihre Anwendung zur Validierung von Telefonnummern zu geben. Wir haben auch die verschiedenen Komponenten einer Telefonnummer besprochen und wie jede Komponente getestet werden kann.

Mit einem grundlegenden Verständnis regulärer Ausdrücke können Sie jetzt weitere Muster erkunden. Sie können auch Tools wie verwenden Regex101 zur Online-Validierung Ihrer Ausdrücke.

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• EVM-Finanzen. Einheitliche Schnittstelle für dezentrale Finanzen. Hier zugreifen.
• Quantum Media Group. IR/PR verstärkt. Hier zugreifen.
• PlatoAiStream. Web3-Datenintelligenz. Wissen verstärkt. Hier zugreifen.
• Quelle: https://stackabuse.com/validate-phone-numbers-in-javascript-with-regular-expressions/