JavaScript -skjemavalidering
Formvalidering er den grunnleggende og viktigste delen av nettutviklingsprosessen. Vanligvis gjøres formvalidering på serversiden. Formvalidering hjelper med å vise feilmeldinger til brukeren hvis det er unødvendige eller gale data er gitt, eller et nødvendig felt blir stående tomt. Hvis serveren finner noen feil, kaster den tilbake den feilen; Deretter viser vi feilmeldingen til brukeren. Men vi kan bruke JavaScript i frontend for å validere skjemadataene og vise feil med en gang. I denne artikkelen lærer vi grunnleggende skjemavalidering i JavaScript. Så la oss komme rett til eksemplene og se hvordan vi kan gjøre det i JavaScript.
Eksempler
Først av alt antar vi et skjema med navnet "Testform", der vi har et inngangsfelt med etiketten "Brukernavn" og en inngangstype sender inn i HTML -filen vår. I formkoden har vi opprettet en OnSubmit -arrangement, der vi foretar nedleggelse og returnerer en funksjon ValidateFunc ().
I skriptfilen vil vi skrive funksjonsdefinisjonen av ValidateFunc (), som vil bli utført hver gang brukeren treffer sendeknappen. I den funksjonen vil vi validere brukernavninngangsfeltet. Vi antar at vi ønsker å validere enten brukernavnfeltet er tomt eller ikke når brukeren treffer sendeknappen.
Så for å validere brukernavnfeltet. Vi tildeler først en variabel til dokumentet.Testform, bare for å gi et rent og forståelig utseende til koden. Deretter, i funksjonsdefinisjonen, vil vi skrive koden for validering. Vi vil skrive en IF -uttalelse for å sjekke feltet tomt skjema. Hvis brukernavnfeltet er tomt, vil vi vise en varslingsboks for å vise feilen, fokusere på brukernavnfeltet igjen og returnere usant slik at skjemaet ikke blir sendt inn. Ellers, hvis den passerer sjekken og dataene blir validert, vil vi komme tilbake til funksjonen.
var theform = dokument.testform;// Form valideringskode
funksjon ValidationFunc ()
hvis (den formen.Navn.verdi == "")
Varsel ("Navnet er tomt");
formen.Navn.fokus();
return falsk;
return (sant);
Etter å ha skrevet all denne koden. Hvis vi kjører koden og klikker på sendeknappen uten å skrive noe i formfeltet.
Som du kan observere på skjermbildet vedlagt nedenfor, kaster det en feil i varslingsboksen.
Dette er et veldig grunnleggende, men likevel godt eksempel for å komme i gang med å implementere skjemavalidering. For videre implementering, som flere skjemavalideringer, eller du vil også sjekke karakterlengden.
For det formålet antar vi først to skjemafelt i skjema -taggen med etiketten "e -post" og "passord" i HTML -filen vår.
For validering i JavaScript, vil vi igjen sette en IF -uttalelse for validering av felt- og passordskjemafelt i funksjonsdefinisjonen av skriptfilen. Anta at vi ønsker å bruke flere valideringer på e -postfeltet som feltet ikke skal være tomt, og lengden skal ikke 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 som vi vil vise, fokusere på e -postskjemafeltet og returnere usant til funksjonen. Tilsvarende, hvis vi vil bruke tegnlengdekontrollen på passordfeltet, kan vi gjøre det.
var theform = dokument.testform;// Form valideringskode
funksjon ValidationFunc ()
hvis (den formen.Navn.verdi == "")
Varsel ("Navnet er tomt");
formen.Navn.fokus();
return falsk;
hvis (den formen.e -post.verdi == "" || formen.e -post.verdi.lengde < 10)
Varsel ("E -post er upassende");
formen.e -post.fokus();
return falsk;
hvis (den formen.passord.verdi.lengde < 6)
Varsel ("Passordet må være 6 tegn lang");
formen.passord.fokus();
return falsk;
return (sant);
Etter å ha skrevet all denne koden, må du laste inn siden for å ha oppdatert kode på nytt. Enten legger vi igjen et tomt e -postfelt eller skriver en e -post mindre enn 10 tegn. I begge tilfeller vil det vise en "e -post er upassende" -feil.
Så det er slik vi kan bruke grunnleggende skjemavalidering i JavaScript. Vi kan også bruke datavalidering på klientsiden ved hjelp av regex eller ved å skrive vår egen tilpassede funksjon. Anta at vi ønsker å bruke datavalidering på e -postfeltet. Regex ville være slik for å validere en e -post.
if (/^[a-za-z0-9.!#$%& '*+/=?^_ '| ~-]+@[a-za-z0-9-]+(?: \.[A-Za-Z0-9-]+)*$/.Test (den formen.e -post.verdi))
Varsel ("E -post er upassende");
formen.e -post.fokus() ;
return falsk;
Dette var bare en grunnleggende demonstrasjon av datavalidering ved bruk av regex. Men himmelen er åpen for deg å fly.
Konklusjon
Denne artikkelen dekker grunnleggende skjemavalidering i JavaScript. Vi har også prøvd og har en snike 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å JavaScripts konsepter og mer nyttig innhold som dette, fortsett å besøke Linuxhint.com. Takk skal du ha!