Validering er den proces, der sikrer, at data er korrekte og komplette.
Lad os i et eksempel fra den virkelige verden antage, at et websted, der kræver, at en registreringsformular udfyldes, inden vi får fuld adgang til dette websted. Registreringssiden ville have indtastningsfelter til brugernavn, adgangskode, e-mail-id osv.
Når brugeren sender formularen, sker der normalt en validering først, før detaljerne sendes til serveren. Denne validering vil forsøge at sikre det bedst mulige omfang, at detaljerne for inputfelterne indtastes på den rigtige måde.
For eksempel skal e-mail-id'et altid være i formatet Denne e-mail-adresse er beskyttet mod spambots. Du skal aktivere JavaScript for at kunne se den. ; hvis nogen kun indtaster brugernavnet i e-mail-id'et, skal valideringen ideelt set mislykkes. Så validering ser på at udføre disse grundlæggende kontrol, før detaljerne sendes til serveren til yderligere behandling.
I denne vejledning lærer du-
- Formularvalidering ved hjælp af HTML5
- Formularvalidering ved hjælp af $ dirty, $ valid, $ ugyldig, $ uberørt
- Formularvalidering ved hjælp af AngularJS Auto Validate
- Brugerfeedback med Ladda-knapper
Formularvalidering ved hjælp af HTML5
Formularvalidering er processen med prævalidering af oplysninger, der er indtastet på en webformular af brugeren, inden de sendes til serveren. Det er altid bedre at validere oplysningerne på selve klientsiden. Dette skyldes, at det tilføjer mindre omkostninger, hvis brugeren skulle få præsenteret formularen igen, hvis de indtastede oplysninger var forkerte.
Lad os se på, hvordan formularvalidering kan udføres i HTML5.
I vores eksempel viser vi en simpel registreringsformular til brugeren, hvor brugeren skal indtaste detaljer såsom et brugernavn, adgangskode, e-mail-id og alder.
Formularen har valideringskontrol for at sikre, at brugeren indtaster oplysningerne på en korrekt måde.
Event Registration Guru99 Global Event
Kode Forklaring:
- Til tekstindtastningstypen bruger vi attributten 'krævet'. Det betyder, at tekstboksen ikke kan være tom, når formularen sendes, og at der skal være en slags tekst i tekstboksen.
- Den næste indgangstype er adgangskode. Da indtastningstypen er markeret som adgangskode, maskeres den, når brugeren indtaster en hvilken som helst tekst i feltet.
- Da inputtypen er angivet som e-mail, skal teksten i feltet matche mønsteret. Denne e-mail-adresse er beskyttet mod spambots. Du skal aktivere JavaScript for at kunne se den. .
- Når en indgangstype er markeret som et tal, hvis en bruger forsøger at indtaste et tegn ved hjælp af tastaturet eller alfabetet, vil det ikke blive indtastet i tekstboksen.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
For at se formularvalidering i aktion skal du klikke på knappen Send uden at indtaste nogen oplysninger på skærmen.
Når der er klikket på knappen Send, kommer der en pop op-menu, der viser en valideringsfejl, som feltet skal udfyldes.
Så valideringen af kontrollen, der blev markeret som påkrævet, får fejlmeddelelsen til at blive vist, hvis brugeren ikke indtaster nogen værdi i tekstfeltet.
Når brugeren indtaster en værdi i adgangskodekontrollen, vil du bemærke symbolet '*', der bruges til at maskere de tegn, der indtastes.
Lad os derefter indtaste forkert e-mail-id og klikke på knappen Send. Når der er klikket på knappen Send, vises en pop op-menu, der viser en valideringsfejl, som feltet skal have @ -symbolet.
Så validering af kontrolelementet, der blev markeret som en e-mail-kontrol, får fejlmeddelelsen til at blive vist, hvis brugeren ikke indtaster et korrekt e-mail-id i tekstfeltet.
Endelig, når du prøver at indtaste tegn i alderskontrolkontrollen, indtastes det ikke på skærmen. Kontrolelementet udfyldes kun med en værdi, når et tal er indtastet i kontrolelementet.
Formularvalidering ved hjælp af $ dirty, $ valid, $ ugyldig, $ uberørt
AngularJS giver sine yderligere egenskaber til validering. AngularJS giver følgende egenskaber til kontroller til valideringsformål
- $ dirty - Brugeren har interageret med kontrollen
- $ valid - Feltindholdet er gyldigt
- $ ugyldig - Feltindholdet er ugyldigt
- $ uberørt - Brugeren har endnu ikke interageret med kontrollen
Nedenfor er de trin, der skal følges for at udføre vinkelvalidering.
Trin 1) Brug egenskaben no validate, når du erklærer formularen. Denne egenskab fortæller HTML5, at valideringen foretages af AngularJS.
Trin 2) Sørg for, at formularen har defineret et navn. Årsagen til dette er, at formularnavnet vil blive brugt, når der udføres vinkelvalidering.
Trin 3) Sørg for, at hver kontrol også har et navn defineret til den. Årsagen til dette er, at kontrolnavnet vil blive brugt, når der udføres vinkelvalidering.
Trin 4) Brug ng-show-direktivet til at kontrollere de $ beskidte, $ ugyldige og $ gyldige egenskaber til kontrollerne.
Lad os se på et eksempel, der inkorporerer de ovennævnte trin.
I vores eksempel
Vi skal bare have et simpelt tekstfelt, hvor brugeren skal indtaste et emne navn i tekstboksen. Hvis dette ikke gøres, udløses en valideringsfejl, og fejlmeddelelsen vises til brugeren.
Event Registration Guru99 Global Event
Kode Forklaring:
- Bemærk, at vi har givet et navn til formularen, som er "myForm". Dette er nødvendigt, når du får adgang til kontrollerne på formularen til AngularJS-validering.
- Brug af egenskaben "novalidate" til at sikre, at HTML-formularen tillader AngularJS at udføre valideringen.
- Vi bruger ng-show-direktivet til at kontrollere, om ejendommen "$ dirty" og "$ invalid" er. Dette betyder, at hvis tekstboksen er blevet ændret, vil ejendomsværdien "$ dirty" være sand. I tilfælde af, at tekstboksens værdi er nul, bliver egenskaben "$ ugyldig" sand. Så hvis begge egenskaber er sande, mislykkes valideringen for kontrollen. Derfor, hvis begge værdier er sande, bliver ng-showet også sandt, og span kontrol med de røde farve tegn vises.
- I dette kontrollerer vi egenskaben "$ error", som også evalueres til sand, fordi vi for kontrollen har nævnt, at værdien skal indtastes for kontrollen. I et sådant tilfælde, hvor der ikke er indtastet data i tekstboksen, viser span-kontrollen teksten "Brugernavn kræves".
- Hvis tekstboksens kontrolværdi er ugyldig, vil vi også deaktivere knappen Send, så brugeren ikke kan indsende formularen. Vi bruger egenskaben "ng-deaktiveret" til kontrolelementet til at gøre dette baseret på den betingede værdi af kontrolelementets "$ beskidte" og "$ ugyldige" egenskab.
- I controlleren indstiller vi bare startværdien af tekstboksens værdi til teksten 'AngularJS'. Dette gøres bare for at indstille nogle standardværdier til tekstboksen, når formularen først vises. Det viser bedre, hvordan validering sker for tekstboksfeltet.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Når formularen først vises, viser tekstboksen værdien af "AngularJS", og "send-knappen" er aktiveret. Så snart du fjerner teksten fra kontrolelementet, er valideringsfejlmeddelelsen aktiveret, og knappen Send er deaktiveret.
Ovenstående skærmbillede viser to ting
- Send-knappen er deaktiveret
- Der er ikke noget emnenavn i emnet tekstfelt. Derfor affyrer det fejlmeddelelsen "Brugernavn er påkrævet."
Formularvalidering ved hjælp af AngularJS Auto Validate
Der er en mulighed i AngularJS, der automatisk har valideret alle kontroller på en formular uden at skulle skrive tilpasset kode til validering. Dette kan gøres ved at inkludere et brugerdefineret modul kaldet "jcs-AutoValidate."
Med dette modul på plads behøver du ikke placere nogen speciel kode for at udføre valideringen eller vise fejlmeddelelserne. Alt dette håndteres af koden inde i JCS-AutoValidate.
Lad os se på et simpelt eksempel på, hvordan man opnår dette.
I dette eksempel
Vi skal bare have en enkel form med en tekstboksstyring, som er et obligatorisk felt. En fejlmeddelelse skal vises, hvis denne kontrol ikke udfyldes.
Event Registration Guru99 Event
Kode Forklaring:
- Først skal vi medtage scriptet "jcs-auto-validate.js", der har al auto-valideringsfunktionalitet.
- Vi er nødt til at sikre, at hvert element inklusive "div tag" placeres i en "form-group" klasse.
- Skal også sikre, at hvert element (som er et HTML-element, såsom inputkontrol, span-kontrol, div-kontrol osv.), Såsom input-kontroller, også placeres i formgruppeklassen.
- Inkluder jcs-autovalidate i dit AngularJS JS-modul.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Når du kører din kode, vises ovenstående formular som standard iht. HTML-koden.
Hvis du prøver at indsende formularen, vises fejlmeddelelsen "Dette felt er påkrævet." Alt dette udføres af JCS-AutoValidate-indstillingen.
Brugerfeedback med Ladda-knapper
"Ladda" -knapperne er en speciel ramme bygget til knapper oven på JavaScript for at give en visuel effekt til knapper, når de trykkes på.
Så hvis en knap får attributten "ladda" og trykkes på, vises en spin-effekt. Der er også forskellige datastile til rådighed for knappen for at give yderligere visuelle effekter.
Lad os se på et eksempel på, hvordan man kan se "ladda" -knapper i aktion. Vi skal bare se en enkel form, der har en send-knap. Når der trykkes på knappen, vises en spin-effekt på knappen.
Event Registration Guru99 Event
Kode Forklaring:
- Vi bruger "ng-send" -direktivet til at kalde en funktion kaldet "send". Denne funktion bruges til at ændre ladda-attributten for send-knappen.
- Ladda-attributten er en speciel attribut for ladda-rammen. Det er denne attribut, der tilføjer spin-effekten til kontrol. Vi indstiller værdien for ladda-attributten til den variabel, der indsendes.
- Datastil-ejendommen er igen en ekstra attribut, der tilbydes af ladda-rammen, som bare tilføjer en anden visuel effekt til knappen Send.
- 'AngularJS-ladda'-modulet skal tilføjes til AngularJS.JS-applikationen for at ladda-rammen kan fungere.
- Oprindeligt definerer og indstiller vi værdien af en variabel kaldet 'indsendelse' til falsk. Denne værdi indstilles til ladda-attributten for knappen Send. Ved oprindeligt at indstille dette til falsk siger vi, at vi ikke ønsker, at send-knappen skal have ladda-effekten endnu.
- Vi erklærer en funktion, som kaldes, når der trykkes på knappen Send. I denne funktion sætter vi 'indsendelse' til sand. Dette vil medføre, at ladda-effekten anvendes på knappen Send.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Når formularen først vises, vises knappen Send i sin enkle form.
Når der sendes på knappen Send, er den indsendende variabel i controlleren indstillet til sand. Denne værdi overføres til "ladda" -attributten for send-knappen, som forårsager spin-effekten af knappen.
Resumé
- Validering af tekstfeltets HTML-kontroller kan udføres ved hjælp af attributten 'krævet'.
- I HTML5 er der nye kontroller tilføjet såsom adgangskode, e-mail og nummer, der giver deres eget sæt valideringer.
- Formularvalidering i AngularJS håndteres ved at se på de $ beskidte, $ gyldige, $ ugyldige og $ uberørte værdier for en formularkontrol.
- Automatisk validering i AngularJS-applikationer kan også opnås ved hjælp af JCS-auto-valideringsmodulet.
- Ladda-knapper kan føjes til et Angular.js-program for at give brugeren en lidt forbedret visuel fornemmelse, når der trykkes på knappen.