Telefonnummer Regex in JavaScript

Bei der Überprüfung eines HTML -Formulars ist es wichtig, die Telefonnummer zu validieren. Abhängig von der Region hat eine gültige Telefonnummer möglicherweise mehrere Formate. Es gibt allgemeine Regeln, z. B. die Begrenzung der Anzahl der Ziffern oder die Aufbewahrung der Anzahl auf nur numerische Werte. In einigen Situationen kann jedoch eine Telefonnummer ein Format enthalten, das Sonderzeichen wie ein Pluszeichen, Dash und Klammern enthält, oder es kann ein völlig anderes Format haben als andere Länder oder Regionen.

Diese Studie erläutert den Regex für die Validierung der Telefonnummer in JavaScript.

Telefonnummer Regex in JavaScript

Regelmäßige Ausdrücke sind die einfachste Methode, um Telefonnummern in JavaScript zu validieren. Abhängig von den Einstellungen des Benutzers können Telefonnummern jedoch auf verschiedene Weise formatiert werden. Hier sind einige regelmäßige Ausdrücke für die Validierung der Telefonnummer.

Beispiel 1: Grundlegende Telefonnummer Regex -Validierung
Hier ermöglichen die untergegebenen Regex-Muster oder die regulären Ausdrücke nur Telefonnummern mit 10 Ziffern. Es sind keine Sonderzeichen, einschließlich Leerzeichen, erlaubt.

Regex -Muster
Befolgen Sie das angegebene Regex -Muster für die grundlegende Telefonnummer -Validierung:

/^\ d 10 $/

Oder

/^\ d 3 \ d 3 \ d 4 $/

Hier ist eine Aufschlüsselung aller Elemente, um den Lesern zu verstehen, was sie enthält.

• “^”Bezeichnet den Beginn der Zeichenfolge
• “/”Vorwärts -Slash -Zeichen wird verwendet, um die Grenzen des regulären Ausdrucks anzuzeigen
• “D”Steht für Ziffern
• “”Zeigt die Grenze an
• “\Der Backslash -Charakter ist der Fluchtcharakter
• “$”Bezeichnet das Ende der Zeichenfolge

Verwenden Sie eine der oben genannten Regexes für die validierende Telefonnummer ohne spezielle Zeichen oder einen Trennzeichen.

Erstellen Sie in der HTML -Datei ein Formular mit dem folgenden Code:

Grundlegende Telefonregex ohne Trennzeichen

Telefon #:

Bitte geben Sie eine gültige Telefonnummer ein

Einreichen

Im obigen Code -Snippet,

• Erstellen Sie zunächst ein Formular mit der ID “form”.
• Erstellen Sie dann ein Eingabtextfeld für den Eingabegestell und weisen Sie eine ID zu “zu“Nummer”.
• Ein Absatz verwendet

  Tag, das einen Fehler anzeigt, wenn der Eingabewert nicht gültig ist.

• Erstellen Sie mit der ID eine Schaltfläche Senden ““einreichen”.

Die folgenden CSS -Klassen werden für die Fehlermeldung verwendet:

.Fehler

Farbe Rot;

.Nachricht

Anzeige: Keine;

Das HTML -Formular sieht aus wie:

Verwenden Sie in der JavaScript -Datei die folgenden Codezeilen:

Funktion validatePhoneNumber (e)
var pnumber = document.GetElementById ('Nummer').Wert;
Wenn (!PhonereGex (pnumber))
dokumentieren.getElementById ('Fehler').Klasse.add ('msg');
alarm ("eingereicht");

anders
dokumentieren.getElementById ('Fehler').Klasse.entfernen ('msg');

e.Standard verhindern();

In diesem Code -Snippet:

• Eine Funktion definieren “validatePhoneNumber () validate”.
• Erhalten Sie den Wert des Eingangsfeldes mit der ID “Nummer"Mit Hilfe der"GetElementById ()"Methode und speichern Sie es in einer Variablen"pnumber”.
• Rufen Sie die Funktion auf “PhonereGex ()"Durch Übergeben der Eingangsnummer"pnumberAls Argument und prüfen Sie, ob die Eingangszahl dem Regex entspricht.
  • Falls ja! Zeigt dann eine Warnung mit der Nachricht an “eingereicht"Und fügt die Klasse hinzu"Nachricht" Verwendung der "Klasse.hinzufügen()Methode, die keine anzeigt.
  • Wenn die Bedingung nicht wahr ist, zeigen Sie den Fehler an, indem Sie das aufrufen “Klasse.entfernen()Methode, die einen Fehler zeigt.

Definieren Sie danach eine Funktion namens “PhonereGex ()”, Wobei das Regex -Muster für die validierende Telefonnummer definiert wird:

Funktion PhonereGex (input_str)
var regpattern = /^\ d 3 \ d 3 \ d 4 $ /;
Return RegPattern.test (input_str);

Zuletzt rufen Sie die Funktion auf “validatePhoneNumber () validate”Auf dem Senden mit der ID der Schaltfläche“einreichen"Mit Hilfe der"AddEventListener ()" Methode:

dokumentieren.GetElementById ('Form').addEventListener ('subieren', validatePhoneNumber);

Ausgang

Die obige Ausgabe bedeutet, dass das Regex -Muster für nur Telefonnummern mit 10 Ziffern und ohne spezielle Zeichen oder Abgrenzer erfolgreich funktioniert.

Beispiel 2: Komplexe Telefonnummer Regex -Validierung
Die untergegebenen Regex-Muster oder regulären Ausdrücke ermöglichen Telefonnummern mit 10 Ziffern und Sonderzeichen, einschließlich Pluszeichen, Dash und Klammern.

Regex-Muster zur Validierung von Telefonnummern mit dem Trennzeichen (-)
Der Regex zur Validierung von Telefonnummern mit 10 Ziffern und einem speziellen Charakter-Dash (-):

/^\ d 3 [-] \ d 3 [-] \ d 4) $/

Das Muster zeigt:

• “^”Bezeichnet den Beginn der Zeichenfolge
• “/”Vorwärts -Slash -Zeichen wird verwendet, um die Grenzen des regulären Ausdrucks anzuzeigen
• “D”Steht für Ziffern
• “”Zeigt die Grenze an
• “[-]”Zeigt einen zulässigen besonderen Charakter an
• “\Der Backslash -Charakter ist der Fluchtcharakter
• “$”Bezeichnet das Ende der Zeichenfolge

Fügen Sie das obige Regex -Muster in das "hinzu"PhonereGex ()Definierte Funktion:

Funktion PhonereGex (input_str)
var regpattern = /^\ d 3 [-] \ d 3 [-] \ d 4) $ /
Return RegPattern.test (input_str);

Die entsprechende Ausgabe ist:

Regex-Muster zur Validierung von Telefonnummern mit Grenzwerten einschließlich Dash (-) und Klammern ()
Die Regex zur Überprüfung von Telefonnummern mit 10 Ziffern und Sonderzeichenklammern () und Dash (-):

/^\ (?(\ d 3) \)?[-]?(\ d 3) [-]?(\ d 4) $/

Das Muster zeigt:

• “^”Bezeichnet den Beginn der Zeichenfolge
• “/”Vorwärts -Slash -Zeichen wird verwendet, um die Grenzen des regulären Ausdrucks anzuzeigen
• “D”Steht für Ziffern
• “”Zeigt die Grenze an
• “[-]”Zeigt einen zulässigen besonderen Charakter an
• “(?”STRECKEN auch wie in der Eingabe erlaubt
• “\Der Backslash -Charakter ist der Fluchtcharakter
• “$”Bezeichnet das Ende der Zeichenfolge

Fügen Sie den oben genannten regulären Ausdruck in "an" anPhonereGex ()Definierte Funktion:

Funktion PhonereGex (input_str)
var regpattern = /^\ (?(\ d 3) \)?[-]?(\ d 3) [-]?(\ d 4) $/;
Return RegPattern.test (input_str);

Ausgang

Die obige Ausgabe akzeptiert die Sonderzeichen oder Grenzwerte in der Eingabe, einschließlich Zahnspangen und Striche mit der 10 -stelligen Telefonnummer. Es wird einen Fehler angezeigt, während das (+) Zeichen im Eingang verwendet wird.

Regex-Muster zur Validierung von Telefonnummern mit allen Abgrenzern, einschließlich Dash (-), Brackets (), DOT (.), Räume und (+) Zeichen
Die Regex zur Überprüfung von Telefonnummern mit 10-stelligen und speziellen Zeichenklammern (), Dash (-), Punkt (.), das Plus (+) -Schild und der Raum:

/^[\+]?[(]?[0-9] 3 [)]?[-\S\.]?[0-9] 3 [-\ S \.]?[0-9] 4 $/

Das Muster zeigt:

• “^”Bezeichnet den Beginn der Zeichenfolge
• “/”Vorwärts -Slash -Zeichen wird verwendet, um die Grenzen des regulären Ausdrucks anzuzeigen
• “D”Steht für Ziffern
• “”Zeigt die Grenze an
• “[-]”Zeigt einen zulässigen besonderen Charakter an
• “[(]?”STRECKEN auch wie in der Eingabe erlaubt
• “\S”Bezeichnet einen Raum
• “\.”Zeigt den Punkt an
• “\Der Backslash -Charakter ist der Fluchtcharakter
• “$”Bezeichnet das Ende der Zeichenfolge

Verwenden Sie das obige Muster in der “PhonereGex ()Definierte Funktion:

Funktion PhonereGex (input_str)
var regpattern = /^[\+]?[(]?[0-9] 3 [)]?[-\S\.]?[0-9] 3 [-\ S \.]?[0-9] 4 $/;
Return RegPattern.test (input_str);

Ausgang

Wir haben alle möglichen Regex -Muster oder regulären Ausdrücke zur Überprüfung von Telefonnummern zusammengestellt.

Abschluss

Die Verwendung regulärer Ausdrücke in JavaScript ist die einfachste Möglichkeit, Telefonnummern zu validieren. Es gibt viele Überprüfungen, die sich der Entwickler mit Hilfe von Regex auf die Telefonnummer bewerben kann. Die Überprüfungen können nur Zahlen oder Zahlen mit Sonderzeichen oder Abgrenzern sein, einschließlich Striche, Zahnspangen, Punkten, Räumen und dem Pluszeichen. Diese Studie erklärt verschiedene Regexes, die die Telefonnummer in JavaScript validieren können.