Brukere kan enkelt administrere skjemavalidering ved hjelp av JavaScript og vanlige uttrykk. Skjemaer er avgjørende for å jobbe riktig nettsted, og å administrere ugyldige innspill i formfeltene er programmererjobben. Denne artikkelen skal vise deg hvordan du oppretter et skjema og hvordan du legger forskjellige valideringskontroller på forskjellige formfelt ved hjelp av JavaScript.

Trinn 1: Sette opp HTML -dokumentet

Lag et nytt HTML -dokument og skriv inn følgende linjer inne i det for å lage et skjema:

Dette er et eksempel på formvalidering

Skriv inn fornavnet ditt:

Skriv inn e -postadressen din

Skriv inn kontakten din nr

Sende inn!

I linjene ovenfor:

• EN Tag brukes til å lage et skjema med navnet satt til gyldighetsform og metoden er satt til "post". Også OnSubmit -eiendommen er satt til “Returner FormSubmit ()” som utfører denne metoden ved innsending og bare sender inn skjemaet hvis den metoden returnerer sann.
• Etter det, bare bruk

  tagger for å be brukeren og å ta innspill fra brukeren. Husk at hver inngangskode har et unikt navn.

• På slutten av skjemaet oppretter du en knapp med type satt til "sende inn".

Hvis HTML -dokumentet er lastet i en nettleser, vil det vise følgende:

Nettsiden ber om brukerens fornavn, e -postadresse og kontaktnummer.

Trinn 2: Sette opp JavaScript -filen

I JavaScript, start med å lage funksjonsformsubmit () med følgende linjer:

funksjon formSubmit ()
// Alle de neste linjene vil bli inkludert i kroppen av denne funksjonen

Etter det, lag tre variabler og lagre verdiene fra de tre feltene inni dem ved å bruke følgende linjer:

var firstName = dokument.skjemaer.gyldighetsform.Navn.verdi;
var conactNumber = dokument.skjemaer.gyldighetsform.e -post.verdi;
var e -postadr = dokument.skjemaer.gyldighetsform.Tele.verdi;

I de ovennevnte linjene, "dokument" objektet ble brukt for å få “Former” attributt, som videre ble brukt med navnet på skjemaet gyldighetsform for å få tilgang til inngangsmerkene med navnene sine inne i den.

Etter det, definer de vanlige uttrykkene for å sjekke gyldigheten av hvert felt med følgende linjer:

var e -postRegex = /^\ w+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/g;
var TelEREGEX = /^\ d 10 $ /;
var nameregex = /\ d+$ /g;

I linjene ovenfor:

• e -postregelx Sjekker for en gyldig e -postadresse med @ inkludert og til og med tillater en prikk “.”Og bindestrek
• TeleRegex Sjekker for bare numeriske tegn med maksimal lengde på inngangen satt til 10
• NAMEREGEX Sjekker for alle spesialtegn eller tall inne i navnefeltet

Etter det, sammenlign de tre vanlige uttrykkene med sine respektive tekstfeltverdier ved hjelp av IF -uttalelser, og hvis noe felt er ugyldig, kan du bare returnere og varsle brukeren, for all denne bruk av følgende linjer:

if (firstName == "" || nameregex.test (firstName))
vindu.Varsel ("Ugyldig fornavn");
Returnfalse;

if (e -postadr == "" || !e -postregelx.test (e -postadr))
vindu.Varsel ("Vennligst skriv inn en gyldig e-postadresse.");
Returnfalse;

if (conactNumber == "" || !TeleRegex.test (conactNumber))
Varsel ("Ugyldig telefonnummer");
Returnfalse;

Etter dette, be brukeren om at inngangene var gyldige og returner verdien som ekte:

Varsel ("Skjema sendt inn med riktig informasjon");
return True;

Den komplette JavaScript -koden er som:

funksjonFORMSUBMIT ()
var firstName = dokument.skjemaer.gyldighetsform.Navn.verdi;
var conactNumber = dokument.skjemaer.gyldighetsform.e -post.verdi;
var e -postadr = dokument.skjemaer.gyldighetsform.Tele.verdi;
var e -postRegex = /^\ w+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/g;
var TelEREGEX = /^\ d 10 $ /;
var nameregex = /\ d+$ /g;
if (firstName == "" || nameregex.test (firstName))
vindu.Varsel ("Ugyldig fornavn");
Returnfalse;

if (e -postadr == "" || !e -postregelx.test (e -postadr))
vindu.Varsel ("Vennligst skriv inn en gyldig e-postadresse.");
Returnfalse;

if (conactNumber == "" || !TeleRegex.test (conactNumber))
Varsel ("Ugyldig telefonnummer");
Returnfalse;

Varsel ("Skjema sendt inn med riktig informasjon");
returnerer;

Trinn 3: Testing av validering av skjemaet

Utfør arbeidet med skjemavalidering ved å utføre HTML -dokumentet og skrive inn data til inngangsfeltene. Gi et ugyldig navn med spesialtegn eller tall inne i det

Nettsiden fikk brukeren om at navnet var ugyldig.

Prøv igjen med riktig navn og feil e -postadresse:

Brukeren ble varslet om at e -postadressen ikke er gyldig.

Etter det, prøv med et gyldig navn og gyldig e -postadresse, men med et ugyldig kontaktnummer som:

Nettsiden fikk brukeren til at kontaktnummeret ikke er gyldig.

Etter det, for den endelige testen, gi all riktig informasjon som:

Med all riktig informasjon gitt, er skjemavalidering vellykket, og webapplikasjonen kan komme videre.

Konklusjon

Formvalidering kan implementeres på en HTML -form med JavaScript, vanlige uttrykk og litt logikkbygg. Regelmessige uttrykk kan definere riktig akseptert inngang for et felt. Etter det kan det vanlige uttrykket matches mot dens respektive inngangsfeltets verdi ved bruk av test () -metoden. Dette gjelder også for andre typer inngangsfelt, kan det være for adresse, postnummer eller landsnavn.