Arbeide med telefonnumre i JavaScript -kode

Et av de største problemene som utviklere står overfor i deres tidlige utvikling er hvordan du tar data fra en bruker og deretter validerer disse dataene. Hvis du tar et innspill som et navn eller registreringsnummer fra en bruker, kan du enkelt validere disse dataene, men det blir litt komplekst når du tar innspill som telefonnummer.

I dette innlegget vil vi gå gjennom hvordan du tar et telefonnummer som inndat oss selv ved å bruke JavaScript.

Bruke HTML5 -inngangskode med TEL -type

Vi kan bruke HTML5 -inngangskoden for å ta innspill fra brukeren, og vi kan gi typen Tlf I inndatakoden for å fortelle nettleseren at denne inngangsboksen skal ta et telefonnummer. HTML5 -inngangst -typen har noen fordeler en er at vi kan stille inn påkrevd Attributt i inndatakoden som forteller nettleseren at brukeren ikke kan fortsette uten å legge inn telefonnummeret, og den andre er at vi kan angi et mønsterattributt. La oss demonstrere inngangskoden i HTML:

I koden ovenfor kan vi se at vi har gitt et vanlig uttrykk som et mønster til inngangskoden, og ved bruk av dette vil dette validere telefonnummeret. La oss se et riktig HTML -program:

Eksempel: 123-456-7890

Sende inn

I koden ovenfor initialiserte vi etikett -taggen som viser et eksempel på telefonnummeret som er akseptert av inngangs taggen nedenfor der vi har definert et mønster. Nå vil selve inngangskoden være ansvarlig for å validere inndata fra brukeren. Etter dette definerte vi en knapp og ga den typen knapp. Hver gang en bruker vil klikke på sende inn Knappen den vil generere et svar basert på skjemaet TAG -handlingen. Noen av eksemplene er nedenfor:

Hvis vi klikker på sendeknappen, la telefonnummeret Input Box tom:

Hvis vi gir et feil mønster og klikker på sendeknappen, vil vi se følgende advarsel:

Bruker JavaScript for å validere telefonnummer

Vi kan også validere telefonnummeret ved hjelp av JavaScript. For dette først oppretter vi en inngangskode og en knapp på HTML på følgende måte:

Eksempel: 123-456-7890

Sende inn

Vi brukte OnClick -hendelsen på knappelementet, noe som betyr at når en bruker klikker på send -knappen, vil HandleClick () -funksjonen begynne å utføre. Denne funksjonen HandleClick () vil bli initialisert i en egen fil kode.JS som vi refererte til ved hjelp av manus Tag sett i koden ovenfor.

La oss nå jobbe med JavaScript -delen:

// Funksjon for å håndtere klikk på send -knappen
const handleclick = () =>
// Få referansen til min telefoninngang
var input = dokument.getElementById ("MyPhone").verdi;
// Format for telefonnummeret
var format = /^\ (?([0-9] 3) \)?[-]?([0-9] 3) [-]?([0-9] 4) $/;
// betingede uttalelser
if (input === ")
Varsel ("Vennligst skriv inn telefonnummer")

annet hvis (input.match (format))
Varsel ("Telefonnummer:"+ Input);

ellers
Varsel ("type ved hjelp av riktig format");

I ovennevnte kode initialiserte vi først HandleClick () -funksjonen, og deretter refererer vi til verdien av inngangskoden. Etter det definerer vi formatet på telefonnummeret som vi ønsker ved å bruke vanlige uttrykk. Et akseptert telefonnummereksempel, i dette tilfellet, ville være 123-456-7890. Deretter bruker vi betingede utsagn, og vi sjekker at hvis inngangen er tom, så varsel Vennligst skriv inn telefonnummeret ellers hvis inngangen samsvarer med formatet, var varsle det nummeret ellers varsle om at nummeret brukeren har typer er i feil format. La oss se utdataene en etter en:

Først klikker vi på sendeknappen mens du lar inndata -boksen være tom:

Deretter skriver vi et feil formatnummer, så ser vi følgende utdata:

Til slutt, la oss gå for riktig format og se utdataene:

Konklusjon

Validering av telefonnumre i JavaScript kan bli en hodepine for en ny utvikler. Det er to metoder som vi kan bruke for å validere telefonnumre. For det første å ta innspill fra en bruker ved hjelp av en HTML -inngangsmerke. Ved siden av å validere telefonnummeret gir vi inndatakoden typen Tel og et mønster som den skal validere. Den andre metoden er å lage et tilpasset JavaScript -program som vil validere telefonnummeret ditt i henhold til et gitt format gitt som et vanlig uttrykk.

I dette innlegget lærte vi hvordan vi tar et telefonnummer som en inndata fra en bruker, og deretter validerte vi det telefonnummeret ved å bruke to metoder; HTML5 Input Tag med TEL -type og tilpasset JavaScript -logikk.