Phenquestions
Formularvalidering er den grundlæggende og vigtigste del af webudviklingsprocessen. Normalt udføres formularvalidering på serversiden. Formularvalidering hjælper med at vise fejlmeddelelser til brugeren, hvis der er nogen unødvendige eller forkerte data, eller hvis et obligatorisk felt er tomt. Hvis serveren finder nogen fejl, kaster den fejlen tilbage; derefter viser vi fejlmeddelelsen til brugeren. Men vi kan bruge javascript i frontend til at validere formulardata og vise fejl med det samme. I denne artikel lærer vi den grundlæggende formvalidering i javascript. Så lad os komme direkte til eksemplerne og se, hvordan vi kan gøre det i javascript.
Eksempler
Først og fremmest antager vi en formular med navnet "testForm", hvor vi har et indtastningsfelt med etiketten "Brugernavn", og en inputtype indsendes i vores HTML-fil. I formtagget har vi oprettet en onsubmit-begivenhed, hvor vi foretager lukning og returnerer en funktion validateFunc ().
I scriptfilen vil vi skrive funktionsdefinitionen af validateFunc (), som bliver udført hver gang når brugeren rammer send-knappen. I denne funktion validerer vi indtastningsfeltet for brugernavn. Vi antager, at vi ønsker at validere enten brugernavnfeltet er tomt eller ikke, når brugeren rammer send-knappen.
Så for at validere brugernavnfeltet. Vi tildeler først en variabel til dokumentet.testForm, bare for at give koden et rent og forståeligt blik. Derefter skriver vi i funktionsdefinitionen koden til validering. Vi skriver en if-erklæring for at kontrollere det tomme formularfelt. Hvis brugernavnfeltet er tomt, viser vi en advarselsboks for at vise fejlen, fokuserer på brugernavnfeltet igen og returnerer falsk, så formularen ikke bliver sendt. Ellers, hvis det passerer kontrollen, og data bliver valideret, vender vi tilbage til funktionen.
var theForm = dokument.testForm;// Formularvalideringskode
funktionsvalideringFunc ()
hvis (formen.navn.værdi == "")
alarm ("navnet er tomt");
formen.navn.fokus();
returner falsk;
returnere (sandt);
Efter at have skrevet al denne kode. Hvis vi kører koden og klikker på knappen Send uden at skrive noget i formularfeltet.
Som du kan se i skærmbilledet, der er vedhæftet nedenfor, kaster det en fejl i advarselsboksen.
Dette er et meget grundlæggende, men godt eksempel for at komme i gang med implementering af formularvalidering. For yderligere implementering, som flere formularvalideringer, eller hvis du også vil kontrollere karakterlængden.
Til det formål antager vi først to formfelter i formtagget med etiketten "e-mail" og "password" i vores HTML-fil.
Til validering i javascript vil vi igen sætte en if-erklæring til validering af e-mail- og adgangskodeformularfelterne i funktionsdefinitionen af scriptfilen. Antag, at vi vil anvende flere valideringer på e-mail-feltet, da feltet ikke skal være tomt, og dets længde ikke må være mindre end 10 tegn. Så vi kan bruge ELLER “||” i if-erklæringen. Hvis nogen af disse fejl opstår, viser den en advarselsboks med den fejlmeddelelse, som vi vil vise, fokuserer på e-mail-formularfeltet og returnerer falsk til funktionen. Tilsvarende, hvis vi vil anvende tegnlængdekontrollen i adgangskodefeltet, kan vi gøre det.
var theForm = dokument.testForm;// Formularvalideringskode
funktionsvalideringFunc ()
hvis (formen.navn.værdi == "")
alarm ("navnet er tomt");
formen.navn.fokus();
returner falsk;
hvis (formen.e-mail.værdi == "" || formen.e-mail.værdi.længde < 10)
alarm ("E-mail er upassende");
formen.e-mail.fokus();
returner falsk;
hvis (formen.adgangskode.værdi.længde < 6)
alarm ("Adgangskoden skal indeholde 6 tegn");
formen.adgangskode.fokus();
returner falsk;
returnere (sandt);
Efter at have skrevet al denne kode, skal du genindlæse siden for at få opdateret kode. Enten efterlader vi et tomt e-mail-felt eller skriver en e-mail på mindre end 10 tegn. I begge tilfælde viser den en fejl "E-mail er upassende".
Så dette er, hvordan vi kan anvende grundlæggende formularvalidering i JavaScript. Vi kan også anvende datavalidering på klientsiden ved hjælp af Regex eller ved at skrive vores egen brugerdefinerede funktion. Antag, at vi vil anvende datavalidering i e-mail-feltet. Regex vil være sådan for validering af en e-mail.
hvis (/ ^ [a-zA-Z0-9.!# $% & '* + / =?^ _ '| ~ -] [e-mailbeskyttet] [a-zA-Z0-9 -] + (?: \.[a-zA-Z0-9 -] +) * $ /.test (formen.e-mail.værdi))
alarm ("E-mail er upassende");
formen.e-mail.fokus() ;
returner falsk;
Dette var bare en grundlæggende demonstration af datavalidering ved hjælp af regex. Men himlen er åben for dig at flyve.
Konklusion
Denne artikel dækker den grundlæggende formularvalidering i javascript. Vi har også prøvet og få et snig ind i datavalidering ved hjælp af regex. Hvis du vil lære mere om regex, har vi en dedikeret artikel relateret til regex på linuxhint.com. For at lære og forstå javascript-koncepter og mere nyttigt indhold som dette, skal du fortsætte med at besøge linuxhint.com. tak skal du have!
