Validering er prosessen som sikrer at data er riktige og fullstendige.
I et eksempel fra den virkelige verden, la oss anta et nettsted som krever at registreringsskjemaet skal fylles ut før vi får full tilgang til dette nettstedet. Registreringssiden vil ha inndatafelt for brukernavn, passord, e-post-ID og så videre.
Når brukeren sender inn skjemaet, vil en validering normalt skje først før detaljene sendes til serveren. Denne valideringen vil prøve å sikre i best mulig grad at detaljene for inntastingsfeltene blir skrevet inn på riktig måte.
For eksempel må e-post-IDen alltid være i formatet Denne e-postadressen er beskyttet mot programmer som samler e-postadresser. Du må aktivere JavaScript for å kunne se den. ; hvis noen bare skriver inn brukernavnet i e-post-ID-en, bør valideringen ideelt sett mislykkes. Så validering ser på å gjøre disse grunnleggende kontrollene før detaljene blir sendt til serveren for videre behandling.
I denne veiledningen vil du lære-
- Formvalidering ved hjelp av HTML5
- Formvalidering ved hjelp av $ dirty, $ valid, $ ugyldig, $ uberørt
- Skjemavalidering ved hjelp av AngularJS Auto Validate
- Tilbakemelding fra brukerne med Ladda-knapper
Formvalidering ved hjelp av HTML5
Formvalidering er prosessen med forhåndsvalidering av informasjon som er angitt på et webskjema av brukeren før den sendes til serveren. Det er alltid bedre å validere informasjonen på selve klientsiden. Dette er fordi det gir mindre overhead hvis brukeren måtte få presentert skjemaet igjen hvis den oppgitte informasjonen var feil.
La oss ta en titt på hvordan skjemavalidering kan utføres i HTML5.
I vårt eksempel viser vi ett enkelt registreringsskjema for brukeren der brukeren trenger å oppgi detaljer som brukernavn, passord, e-post-ID og alder.
Skjemaet vil ha valideringskontroller for å sikre at brukeren legger inn informasjonen på riktig måte.
Event Registration Guru99 Global Event
Kode Forklaring:
- For tekstinntastingstypen bruker vi attributtet 'obligatorisk'. Dette betyr at tekstboksen ikke kan være tom når skjemaet sendes inn, og at det skal være en slags tekst i tekstboksen.
- Den neste inndatatypen er passord. Siden inndatatypen er merket som passord, vil den maskeres når brukeren skriver inn hvilken som helst tekst i feltet.
- Fordi inndatatypen er spesifisert som e-post, må teksten i boksen stemme overens med mønsteret. Denne e-postadressen er beskyttet mot programmer som samler e-postadresser. Du må aktivere JavaScript for å kunne se den. .
- Når inndatatypen er merket som et nummer, hvis en bruker prøver å skrive inn et tegn ved hjelp av tastaturet eller alfabetet, blir det ikke lagt inn i tekstboksen.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
For å se skjemavalidering i aksjon, klikk på Send-knappen uten å oppgi noen informasjon på skjermen.
Etter at du har klikket på send-knappen, kommer en popup som viser en valideringsfeil som feltet må fylles ut.
Så validering for kontrollen som ble merket som nødvendig, fører til at feilmeldingen vises hvis brukeren ikke legger inn noen verdi i tekstfeltet.
Når brukeren skriver inn noen verdi i passordkontrollen, vil du legge merke til symbolet '*' som brukes til å maskere tegnene som blir skrevet inn.
La oss deretter angi feil e-post-ID og klikke på send-knappen. Etter at du har klikket på send-knappen, vises en popup som viser en valideringsfeil som feltet trenger for å ha @ -symbolet.
Så validering for kontrollen som ble merket som en e-postkontroll, vil føre til at feilmeldingen vises hvis brukeren ikke oppgir en riktig e-post-ID i tekstfeltet.
Til slutt, når du prøver å skrive inn tegn i alderskontrollen, blir det ikke lagt inn på skjermen. Kontrollen fylles bare med en verdi når et tall er angitt i kontrollen.
Formvalidering ved hjelp av $ dirty, $ valid, $ ugyldig, $ uberørt
AngularJS gir sine tilleggsegenskaper for validering. AngularJS gir følgende egenskaper for kontroller for valideringsformål
- $ dirty - Brukeren har samhandlet med kontrollen
- $ valid - Feltinnholdet er gyldig
- $ ugyldig - Feltinnholdet er ugyldig
- $ uberørt - Brukeren har ennå ikke samhandlet med kontrollen
Nedenfor er trinnene som må følges for å utføre vinkelvalidering.
Trinn 1) Bruk eiendommen no validate når du erklærer skjemaet. Denne egenskapen forteller HTML5 at valideringen vil bli gjort av AngularJS.
Trinn 2) Forsikre deg om at skjemaet har et navn definert for det. Årsaken til å gjøre dette er at når du utfører Angular validering, vil skjemanavnet bli brukt.
Trinn 3) Sørg for at hver kontroll også har et navn definert for den. Årsaken til å gjøre dette er at kontrollnavnet vil bli brukt når du utfører vinkelvalidering.
Trinn 4) Bruk ng-show-direktivet for å se etter $ skitne, $ ugyldige og $ gyldige egenskaper for kontrollene.
La oss se på et eksempel som inneholder de ovennevnte trinnene.
I vårt eksempel,
Vi skal bare ha et enkelt tekstfelt der brukeren trenger å legge inn et emne navn i tekstboksen. Hvis dette ikke er gjort, utløses en valideringsfeil, og feilmeldingen vises til brukeren.
Event Registration Guru99 Global Event
Kode Forklaring:
- Merk at vi har gitt et navn på skjemaet som er "myForm". Dette kreves når du får tilgang til kontrollene på skjemaet for AngularJS-validering.
- Bruk av "novalidate" -egenskapen for å sikre at HTML-skjemaet tillater AngularJS å utføre valideringen.
- Vi bruker ng-show-direktivet for å sjekke om eiendommen "$ dirty" og "$ invalid". Dette betyr at hvis tekstboksen er endret, vil "$ dirty" -verdien være sant. I tilfelle hvor tekstboksverdien er null, blir "$ ugyldig" -egenskapen sann. Så hvis begge egenskapene er sanne, vil valideringen mislykkes for kontrollen. Derfor, hvis begge verdiene er sanne, blir ng-showet også sant, og spennkontrollen med de røde fargetegnene vises.
- I dette sjekker vi "$ error" -egenskapen som også evalueres til sant fordi vi har nevnt for kontrollen at verdien skal angis for kontrollen. I et slikt tilfelle, der det ikke er oppgitt data i tekstboksen, vil span-kontrollen vise teksten "Brukernavn kreves".
- Hvis tekstboksen kontrollverdi er ugyldig, vil vi også deaktivere send-knappen slik at brukeren ikke kan sende inn skjemaet. Vi bruker egenskapen "ng-deaktivert" for kontrollen for å gjøre dette basert på den betingede verdien av "$ dirty" og "$ ugyldig" -egenskapen til kontrollen.
- I kontrolleren setter vi bare startverdien til tekstboksverdien til teksten 'AngularJS'. Dette gjøres bare for å angi en standardverdi i tekstboksen når skjemaet først vises. Det viser bedre hvordan validering skjer for tekstboksfeltet.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Når skjemaet først vises, viser tekstboksen verdien til "AngularJS", og "send-knappen" er aktivert. Så snart du fjerner teksten fra kontrollen, er valideringsfeilmeldingen aktivert, og Send-knappen er deaktivert.
Skjermbildet ovenfor viser to ting
- Send-knappen er deaktivert
- Det er ikke noe emnetavn i emneboksen. Derfor utløser det feilmeldingen "Brukernavn kreves."
Skjemavalidering ved hjelp av AngularJS Auto Validate
Det er et anlegg i AngularJS for å ha validert alle kontroller på et skjema automatisk uten å måtte skrive tilpasset kode for validering. Dette kan gjøres ved å inkludere en tilpasset modul kalt "jcs-AutoValidate."
Med denne modulen på plass, trenger du ikke plassere noen spesiell kode for å utføre valideringen eller vise feilmeldingene. Alt dette håndteres av koden inne i JCS-AutoValidate.
La oss se på et enkelt eksempel på hvordan du kan oppnå dette.
I dette eksemplet,
Vi skal bare ha et enkelt skjema med en tekstboks-kontroll som er et obligatorisk felt. En feilmelding skal vises hvis denne kontrollen ikke er fylt ut.
Event Registration Guru99 Event
Kode Forklaring:
- Først må vi inkludere skriptet "jcs-auto-validate.js" som har alle funksjonene for automatisk validering.
- Vi må sørge for at hvert element inkludert "div-taggen" plasseres i en "form-group" -klasse.
- Må også sørge for at hvert element (som er et HTML-element som inngangskontroll, spennkontroll, div-kontroll og så videre) som inngangskontrollene også plasseres i formgruppeklassen.
- Inkluder jcs-autovalidate i AngularJS JS-modulen din.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Som standard når du kjører koden, vises skjemaet ovenfor iht. HTML-koden.
Hvis du prøver å sende inn skjemaet, vil feilmeldingen vises: "Dette feltet er obligatorisk." Alt dette gjøres av alternativet JCS-AutoValidate.
Tilbakemeldinger fra brukerne med Ladda-knapper
"Ladda" -knappene er et spesielt rammeverk bygget for knapper på toppen av JavaScript for å gi en visuell effekt til knappene når du trykker på dem.
Så hvis en knapp får attributtet "ladda" og trykkes på, vil en spinneffekt vises. Det er også forskjellige datastiler tilgjengelig for knappen for å gi ekstra visuelle effekter.
La oss se på et eksempel på hvordan du kan se "ladda" -knapper i aksjon. Vi skal bare se et enkelt skjema som har en send-knapp. Når du trykker på knappen, vises en spinneffekt på knappen.
Event Registration Guru99 Event
Kode Forklaring:
- Vi bruker "ng-submit" -direktivet for å kalle en funksjon kalt "submit". Denne funksjonen vil bli brukt til å endre ladda-attributtet til send-knappen.
- Ladda-attributtet er en spesiell attributt for ladda-rammeverket. Det er denne egenskapen som gir spin-effekten til kontrollen. Vi setter verdien av ladda-attributtet til variabelen som sendes inn.
- Data-stil-egenskapen er igjen et ekstra attributt som tilbys av ladda-rammeverket, som bare legger til en annen visuell effekt på send-knappen.
- 'AngularJS-ladda' -modulen må legges til i AngularJS.JS-applikasjonen for at ladda-rammeverket skal fungere.
- I utgangspunktet definerer vi og setter verdien til en variabel kalt 'submitting' til false. Denne verdien er satt for ladda-attributtet til send-knappen. Ved å først sette dette til feil, sier vi at vi ikke vil at sendeknappen skal ha ladda-effekten foreløpig.
- Vi erklærer en funksjon som kalles når du trykker på Send-knappen. I denne funksjonen setter vi 'innlevering' til sant. Dette vil føre til at ladda-effekten blir brukt på send-knappen.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Når skjemaet først vises, vises sendeknappen i sin enkle form.
Når du trykker på sendeknappen, blir den innleverende variabelen i kontrolleren satt til sann. Denne verdien blir overført til "ladda" -attributtet til send-knappen som forårsaker spin-effekten av knappen.
Sammendrag
- Validering for tekstboksen HTML-kontroller kan gjøres ved hjelp av attributtet 'obligatorisk'.
- I HTML5 er det nye kontroller lagt til som passord, e-post og nummer som gir sitt eget sett med valideringer.
- Formvalidering i AngularJS blir tatt vare på ved å se på de skitne, $ gyldige, $ ugyldige og $ uberørte verdiene til en skjemakontroll.
- Automatisk validering i AngularJS-applikasjoner kan også oppnås ved å bruke JCS-auto-valideringsmodulen.
- Ladda-knapper kan legges til i et Angular.js-program for å gi brukeren litt forbedret visuell følelse når du trykker på knappen.