Phenquestions
Formvalidering er den grunnleggende og viktigste delen av webutviklingsprosessen. Vanligvis gjøres skjemavalidering på serversiden. Formvalidering hjelper til med å vise feilmeldinger til brukeren hvis det er unødvendige eller gale data, eller et obligatorisk felt er tomt. Hvis serveren finner noen feil, kaster den feilen tilbake; deretter viser vi feilmeldingen til brukeren. Men vi kan bruke javascript i front-enden for å validere skjemadataene og vise feil med en gang. I denne artikkelen vil vi lære den grunnleggende validering av skjema i javascript. Så la oss komme rett til eksemplene og se hvordan vi kan gjøre det i javascript.
Eksempler
Først og fremst antar vi et skjema med navnet "testForm", der vi har et inndatafelt med etiketten "Brukernavn", og en inndatatype sendes inn i HTML-filen. I skjemaet har vi opprettet en onsubmit-hendelse der vi avslutter og returnerer en funksjon validateFunc ().
I skriptfilen vil vi skrive funksjonsdefinisjonen av validateFunc (), som blir utført hver gang brukeren trykker på send-knappen. I den funksjonen vil vi validere brukerinntastingsfeltet. Vi antar at vi vil validere enten brukernavnfeltet er tomt eller ikke når brukeren trykker på send-knappen.
Så for å validere brukernavnfeltet. Vi tilordner først en variabel til dokumentet.testForm, bare for å gi koden et rent og forståelig blikk. Deretter, i funksjonsdefinisjonen, vil vi skrive koden for validering. Vi skriver en if-setning for å sjekke det tomme skjemafeltet. Hvis brukernavnfeltet er tomt, viser vi en varslingsboks for å vise feilen, fokuserer på brukernavnfeltet igjen og returnerer falsk slik at skjemaet ikke blir sendt. Ellers, hvis den passerer sjekken og data blir validert, vil vi komme tilbake til funksjonen.
var theForm = dokument.testForm;// Formularvalideringskode
funksjonsvalideringFunc ()
hvis (theForm.Navn.verdi == "")
varsel ("navnet er tomt");
formen.Navn.fokus();
returner falsk;
retur (sant);
Etter å ha skrevet all denne koden. Hvis vi kjører koden og klikker på send-knappen uten å skrive noe i skjemafeltet.
Som du kan se i skjermbildet som er vedlagt nedenfor, kaster det en feil i varselboksen.
Dette er et veldig grunnleggende, men likevel godt eksempel for å komme i gang med implementering av skjemavalidering. For videre implementering, som flere formvalideringer, eller du vil også sjekke tegnlengden.
For det formålet antar vi først to skjemafelt i skjemikoden med etiketten "e-post" og "passord" i HTML-filen vår.
For validering i javascript, vil vi igjen sette en if-setning for validering av e-post- og passordskjemafeltene i funksjonsdefinisjonen til skriptfilen. Anta at vi vil bruke flere valideringer på e-postfeltet, for eksempel at feltet ikke skal være tomt, og at lengden ikke skal være mindre enn 10 tegn. Så, vi kan bruke ELLER “||” i if-uttalelsen. Hvis noen av disse feilene oppstår, vil den vise en varslingsboks med feilmeldingen vi vil vise, fokusere på e-postskjemaet og returnere falsk til funksjonen. På samme måte, hvis vi vil bruke tegnlengdekontrollen i passordfeltet, kan vi gjøre det.
var theForm = dokument.testForm;// Formularvalideringskode
funksjonsvalideringFunc ()
hvis (theForm.Navn.verdi == "")
varsel ("navnet er tomt");
formen.Navn.fokus();
returner falsk;
hvis (theForm.e-post.verdi == "" || formen.e-post.verdi.lengde < 10)
varsel ("E-post er upassende");
formen.e-post.fokus();
returner falsk;
hvis (theForm.passord.verdi.lengde < 6)
varsel ("Passordet må inneholde 6 tegn");
formen.passord.fokus();
returner falsk;
retur (sant);
Etter å ha skrevet all denne koden, laster du siden på nytt for å ha oppdatert kode. Nå legger vi enten et tomt e-postfelt eller skriver en e-post på mindre enn 10 tegn. I begge tilfeller vil den vise feilen "E-post er upassende".
Så dette er hvordan vi kan bruke grunnleggende formvalidering i JavaScript. Vi kan også bruke datavalidering på klientsiden ved hjelp av Regex eller ved å skrive vår egen tilpassede funksjon. Anta at vi vil bruke datavalidering på e-postfeltet. Regex vil være slik for å validere en e-post.
hvis (/ ^ [a-zA-Z0-9.!# $% & '* + / =?^ _ '| ~ -] [e-postbeskyttet] [a-zA-Z0-9 -] + (?: \.[a-zA-Z0-9 -] +) * $ /.test (formen.e-post.verdi))
varsel ("E-post er upassende");
formen.e-post.fokus() ;
returner falsk;
Dette var bare en grunnleggende demonstrasjon av datavalidering ved hjelp av regex. Men himmelen er åpen for deg å fly.
Konklusjon
Denne artikkelen dekker den grunnleggende formvalideringen i javascript. Vi har også prøvd å snike oss inn i datavalidering ved hjelp av regex. Hvis du vil lære mer om regex, har vi en dedikert artikkel relatert til regex på linuxhint.com. For å lære og forstå javascript-konsepter og mer nyttig innhold som dette, fortsett å besøke linuxhint.com. Takk skal du ha!
