Hvordan validere e-postskjema på klientsiden i JavaScript

Hvis du vil sende inn data til serveren, er det nødvendig å dobbeltsjekke formatet på dataene som skal sendes inn. Denne prosessen kalles Klientsiden skjema validering. Validering av klientsiden for klientsiden sikrer at innsendte data oppfyller kriteriene som er spesifisert i skjemakontrollene.

På klientsiden, E -post Skjemaer er validert for å få tak i ugyldige data slik at brukeren kan rette dem umiddelbart. I andre tilfeller, hvis ugyldige data blir sendt til serveren, vil de bli avvist, og den tilsvarende serveren vil sende den tilbake til klienten.

Denne oppskrivningen vil diskutere validering E -postskjemas på klientsiden i JavaScript. Så la oss starte!

Hvordan validere e-postskjema på klientsiden i JavaScript

En e -post inneholder en "streng,”Som er representert som en undergruppe av ASCII -tegn, atskilt i to deler ved å bruke“@”Symbol. Det kan skrives som "userInfo@domene", hvor "brukerinformasjon”Er brukerens private informasjon. Lengden på “brukerinformasjon”Delen skal ikke være mer enn 64 tegn, mens domene Navnet kan ha 253 tegn.

“brukerinformasjon”Del kan inkludere de undergitte ASCII-tegnene:

• Tall fra 0 til 9.
• Stor bokstav (A-Z) og små bokstaver (A-Z) Engelske brev.
• Spesialtegn som som ~ _ ' / ? - + = ^ | $ * ' ! & # %
• Du kan også legge til en periode karakter ".”, Men det skal ikke være den første og siste karakteren av" userinfo "-delen og ikke gjenta den etter den andre.

Domenenavnet som er spesifisert i e -postadressen, for eksempel org, info, nett, com, oss, kan inneholde sifre, bokstaver, bindestrekk og full stopp.

Ta en titt på noen eksempler på gyldige og ugyldige e-post-ID-er:

Gyldige e -postformateksempler

• [email protected]
• [email protected]
• [email protected]

Ugyldige eksempler på e -postformat

• galakse.com (“@”Karakter er ikke lagt til)
• [email protected] (toppnivå -domene kan ikke starte med ".)
• [email protected] (“.en”Er ikke et gyldig domene på toppnivå)
• [email protected] (ikke start en e -post -ID med ".”Karakter)
• @noen.domene.nett (“brukerinformasjon”Delen mangler før“@”Karakter)

Nå vil vi demonstrere et praktisk eksempel relatert til skjema for validering av e -post i JavaScript.

Eksempel: Valider e -postskjema på klientsiden i JavaScript
Først av alt vil vi lage et skjema på vår kundeside med en "inngang”Felt for å legge inn e -post -ID og en“Sende inn”-Knappen for å bekrefte e -postformatet:

Vennligst skriv inn e -postadressen din

Regelmessig uttrykk for å validere e -postskjema på klientsiden i JavaScript

I JavaScript, Vanlig uttrykk er en av de mest nyttige metodene som brukes for å validere e -postformat. De representerer et tegn på mønster som sammenlignes med brukerinngangen.

I vår JavaScript -fil vil vi legge til følgende vanlige uttrykk for å validere e -post -IDen som er angitt av brukeren:

mailformat = /^\ w+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/;

Det ovennevnte vanlige uttrykket tillater deg å legge til store bokstaver (A-Z) og små bokstaver (A-Z), sifre (0-9), periode ".”Og spesialtegn som ~ _ ' / ? - + = ^ | $ * ' ! & # %, i e -post -IDen.

Vi vil lage en “ValidateEmail ()”Funksjon i JavaScript, som vil ta“InputText”Som et argument. Etter det vil vi lagre det nevnte vanlige uttrykket i “Mailformat”. Den lagt til “Mailformat”Blir deretter sammenlignet med brukerinngangen. Hvis den angitte e -post -IDen har et gyldig format, vises et varsel på skjermen med strengen "Du har angitt en gyldig e -postadresse!”. Ellers vil det gi deg beskjed om at e -post -IDen er ugyldig:

funksjon ValidateEmail (inputText)
var mailformat = /^\ w+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/;
if (inputText.verdi.match (mailformat))
Varsel ("Du har angitt en gyldig e -postadresse!");
dokument.Form1.tekst1.fokus();
return True;

annet
Varsel ("Ugyldig e -postadresse");
dokument.Form1.tekst1.fokus();
return falsk;

Vi har også satt HTML Elements -stilen for å forbedre utseendet på e -postvalideringsskjemaet:

Nå vil vi åpne opp “indeks.html ” fil ved hjelp av VS -kode “Live server" Utvidelse:

Her kommer e -postvalideringsskjemaet med et inngangsfelt og send knapp:

For første gang vil vi legge inn en gyldig e -post -ID og:

Etter å ha klikket på “Sende inn”Button, en varslingsboks vises på vår webside, som sier at den angitte e -postadressen er gyldig:

Nå, for å se etter en ugyldig e -post, vil vi skrive ut en e -post med et ugyldig format og deretter klikke på sendeknappen:

Du kan se at skjemaet for validering av e -post fungerer perfekt for å validere e -post -IDen i henhold til det angitte formatet.

Konklusjon

Ved hjelp av JavaScript kan du validere e-postskjemaer på klientsiden. Det opprettet e -postvalideringsskjema er basert på brukerkrav, for eksempel å tillate vanlige uttrykk, akseptere bare tegn og sifre i e -post -ID, eller bare tillate spesifikke domener. Validering av e -postskjemaer hjelper også med å sende inn riktig og verdifull informasjon til serveren. Denne oppskrivningen diskuterte prosedyren for å validere e-postskjemaer på klientsiden i JavaScript ved hjelp av passende eksempler.