Telefonnummer Regex i JavaScript

Mens du verifiserer en HTML -skjema, er det viktig å validere telefonnummeret. Avhengig av regionen kan et gyldig telefonnummer ha flere formater. Det er generelle regler, for eksempel å begrense antall sifre eller holde nummeret til bare numeriske verdier. I noen situasjoner kan imidlertid et telefonnummer ha et format som inkluderer spesialtegn som et pluss tegn, strek og parentes, eller det kan ha et helt annet format enn andre land eller regioner.

Denne studien vil forklare Regex for å validere telefonnummeret i JavaScript.

Telefonnummer Regex i JavaScript

Regelmessige uttrykk er den enkleste metoden for å validere telefonnumre i JavaScript. Avhengig av brukerens preferanser, kan telefonnumre imidlertid formateres på forskjellige måter. Her er noen vanlige uttrykk for validering av telefonnummer.

Eksempel 1: Grunnleggende telefonnummer Regex validering
Her tillater de undergitte regex-mønstrene eller de vanlige uttrykkene bare telefonnumre med 10 sifre. Ingen spesielle tegn, inkludert mellomrom, er tillatt.

Regex mønster
Følg det gitte Regex -mønsteret for grunnleggende telefonnummervalidering:

/^\ d 10 $/

Eller

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

Her er en oversikt over alle elementene for å hjelpe leserne til å forstå hva den inneholder.

• “^”Betegner starten på strengen
• “/”Forward Slash -karakter brukes til å indikere det vanlige uttrykkets grenser
• “d”Står for sifre
• “”Indikerer grensen
• “\”Backslash -karakter er fluktkarakteren
• “$”Betegner slutten av strengen

Bruk noen av de ovennevnte regene for validering av telefonnummer uten spesiell karakter eller en avgrenser.

I HTML -filen oppretter du et skjema ved hjelp av koden nedenfor:

Grunnleggende telefon Regex uten avgrensning

Telefon #:

Vennligst oppgi et gyldig telefonnummer

Sende inn

I ovennevnte kodebit,

• Først må du lage et skjema med ID "form”.
• Opprett deretter et inngangstekstfelt for inngangsverdien og tilordne en ID “Antall”.
• Et avsnitt som bruker

  Tag som vil vise en feil når inngangsverdien ikke er gyldig.

• Opprett en innsendingsknapp med ID “sende inn”.

Følgende CSS -klasser brukes til feilmeldingen:

.feil

fargen rød;

.msg

Display: Ingen;

HTML -skjemaet vil se ut som:

I JavaScript -filen bruker du kodelinjene nedenfor:

funksjon ValidatePhonNumber (e)
var pnumber = dokument.getElementById ('nummer').verdi;
hvis (!phoneRegex (pNumber))
dokument.getElementById ('Feil').Klasseliste.legg til ('msg');
Varsel ("Sendt inn");

annet
dokument.getElementById ('Feil').Klasseliste.fjerne ('msg');

e.PreventDefault ();

I denne kodebiten:

• Definere en funksjon “ValidatePhonenumber ()”.
• Få verdien av inngangsfeltet ved å bruke ID “Antall”Ved hjelp av“getElementById ()”Metode og lagre den i en variabel”Pnumber”.
• Ring funksjonen “PhoneRegex ()”Ved å sende inngangsnummeret”Pnumber”Som et argument, og sjekk om inngangsnummeret er lik regexen.
  • Hvis ja! viser deretter et varsel med meldingen “sendt”Og legger til klassen“msg" bruker "Klasseliste.Legg til()”Metode som ikke viser ingen.
  • Hvis tilstanden ikke er sann, vis feilen ved å ringe "Klasseliste.fjerne()”Metode, som vil vise en feil.

Etter det, definer en funksjon som heter “PhoneRegex ()”Hvor Regex -mønsteret vil bli definert for validering av telefonnummer:

funksjon phoneRegex (input_str)
var regpattern = /^\ d 3 \ d 3 \ d 4 $ /;
returnerer regpattern.test (input_str);

Til slutt, ring funksjonen "ValidatePhonenumber ()”På send ved hjelp av knappens ID”sende inn”Ved hjelp av“AddEventListener ()”Metode:

dokument.getElementById ('form').AddEventListener ('Send', ValidatePhonNumber);

Produksjon

Ovennevnte utgang betyr at Regex -mønsteret for bare telefonnumre med 10 sifre og uten noen spesiell karakter eller avgrensende fungerer vellykket.

Eksempel 2: Kompleks telefonnummer Regex validering
De undergitte regex-mønstrene eller vanlige uttrykk tillater telefonnumre med 10 sifre og spesialtegn inkludert pluss tegn, strek og parentese.

Regex-mønster for å validere telefonnumre med avgrensningsprash (-)
Regex for validering av telefonnumre med 10 sifre og en spesiell karakterstrekk (-):

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

Mønsteret viser:

• “^”Betegner starten på strengen
• “/”Forward Slash -karakter brukes til å indikere det vanlige uttrykkets grenser
• “d”Står for sifre
• “”Indikerer grensen
• “[-]”Indikerer en tillatt spesiell karakter
• “\”Backslash -karakter er fluktkarakteren
• “$”Betegner slutten av strengen

Legg til ovennevnte regex -mønster i “PhoneRegex ()”Definert funksjon:

funksjon phoneRegex (input_str)
var regpattern = /^\ d 3 [-] \ d 3 [-] \ d 4) $ /
returnerer regpattern.test (input_str);

Tilsvarende utgang vil være:

Regex-mønster for å validere telefonnumre med avgrensere inkludert Dash (-), og seler ()
Regex for validering av telefonnumre med 10 sifre og spesialtegnstag (), og Dash (-):

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

Mønsteret viser:

• “^”Betegner starten på strengen
• “/”Forward Slash -karakter brukes til å indikere det vanlige uttrykkets grenser
• “d”Står for sifre
• “”Indikerer grensen
• “[-]”Indikerer en tillatt spesiell karakter
• “(?”Betegner også som tillatt i inngangen
• “\”Backslash -karakter er fluktkarakteren
• “$”Betegner slutten av strengen

Legg til ovennevnte vanlige uttrykk i “PhoneRegex ()”Definert funksjon:

funksjon phoneRegex (input_str)
var regpattern = /^\ (?(\ d 3) \)?[-]?(\ d 3) [-]?(\ d 4) $/;
returnerer regpattern.test (input_str);

Produksjon

Ovennevnte utgang aksepterer spesialtegnene eller avgrenserne i inngang, inkludert seler og streker med 10 sifre telefonnummer. Det viser en feil mens (+) tegnet brukes i inngangen.

Regex-mønster for å validere telefonnumre med alle avgrensere inkludert Dash (-), Brackets (), DOT (.), Mellomrom og (+) tegn
Regex for validering av telefonnumre med 10-sifrede og spesialtegnstag (), Dash (-), Dot (.), pluss (+) -tegnet, og plassen:

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

Mønsteret viser:

• “^”Betegner starten på strengen
• “/”Forward Slash -karakter brukes til å indikere det vanlige uttrykkets grenser
• “d”Står for sifre
• “”Indikerer grensen
• “[-]”Indikerer en tillatt spesiell karakter
• “[(]?”Betegner også som tillatt i inngangen
• “\ S”Betegner et rom
• “\.”Indikerer prikken
• “\”Backslash -karakter er fluktkarakteren
• “$”Betegner slutten av strengen

Bruk mønsteret ovenfor i “PhoneRegex ()”Definert funksjon:

funksjon phoneRegex (input_str)
var regpattern = /^[\+]?[(]?[0-9] 3 [)]?[-\ S \.]?[0-9] 3 [-\ S \.]?[0-9] 4 $/;
returnerer regpattern.test (input_str);

Produksjon

Vi har samlet alle mulige regex -mønstre eller vanlige uttrykk for å validere telefonnumre.

Konklusjon

Å bruke vanlige uttrykk i JavaScript er den enkleste måten å validere telefonnumre. Det er mange sjekker som utvikleren kan bruke på telefonnummeret ved hjelp av regex. Kontrollene kan bare være tall eller tall med spesialtegn eller avgrensere, inkludert streker, seler, prikker, mellomrom og pluss -tegnet. Denne studien forklarer forskjellige regexes som kan validere telefonnummeret i JavaScript.