Hvordan implementere skjemavalidering i Angular JS?

Validering er en metode for å autentisere brukeren. Den brukes i alle webteknologier som og . Men i dag vil vårt fokus være på validering i Angular JS i følgende rekkefølge:

• Hva er skjemavalidering?
• Formvalidering i kantete JS
• Trinn i formvalidering
• Kode

Hva er skjemavalidering?

Formvalidering er en teknikk der vi kan validere HTML-skjemaet. La oss ta et enkelt eksempel for å anta at en bruker har et HTML-skjema og at HTML-skjemaet har forskjellige felt, dette feltet blir validert av skjemavalidator når vi vil validere skjemaet, vi trenger bare å sjekke verdien til det spesielle feltet med validatoruttrykket .

Hvis regulært uttrykk og feltverdien er den samme, kan vi si at skjemaet vårt er validert. I HTML-skjemaet er det forskjellige typer valideringer som e-post, obligatorisk, min, maks, passord, etc.

Formvalidering i kantete JS

La oss snakke om hvordan vi kan validere et skjema i kantete JS. Angular JS gir forskjellige typer formvalideringsegenskaper som vi kan bruke til å validere skjemaet eller få data fra skjemaet.

• $ gyldig : Denne egenskapen forteller om feltet er gyldig eller ikke ved å bruke den riktige regelen på det.

• $ ugyldig : Som navnet sier ugyldig, er dette fliset vær ugyldig eller ikke basert på passende regel om det.

• $ uberørt : Det vil returnere true i skjemainntastingsfeltet ikke brukes.

  
  
  

• $ skitten : Det vil returnere true i skjemainntastingsfeltet som brukes.

• $ rørt : BooleanTrue hvis inngangen har blitt uskarpt.

Slik får du tilgang til skjemaet: .

Slik får du tilgang til en inngang: ..

La oss nå forklare formvalidering i kantete JS med et eksempel, så først lager vi to filer, en er app.js og en annen er index.html. Index.htm-filen vår inneholder et enkelt HTML-skjema som har vinkelvalidering, og vår app.js-fil inneholder backend-koden for å håndtere skjemavalidering på index.html-siden.

Deindex.htmlsideinnhold skjema medfornyeiendom og hva det betyr nøyaktig?

Novalidate-egenskapen i skjemikoden forteller HTML at vi kan bruke vår tilpassede skjemavalidering. Hvis vi ikke gir novalidate-egenskapen, og HTML-skjemaet valideres ved å bruke HTML5-standardvalideringsegenskaper for skjema.

Trinn i formvalidering

I vårt skjema opprettet vi 6 felt i vårt skjema, disse er fornavn, etternavn, e-post, telefon, passord og melding.

1. Først legger vi til den nødvendige feltvalidatoren, denne validatoren forteller brukerne at et bestemt felt er obligatorisk.

2. Neste er e-postfeltet hvis en bruker ikke gir noen gyldig e-post, så sender e-postvalidatoren en e-postvalideringsfeil.

3. Vi setter minimum og maksimal lengde i passordvalidering, minimumslengde er 5 og maksimal lengde er 8 slik at brukeren kan gi et gyldig passord mellom 5 og 8 tegn.

4. Til slutt setter vi telefonen og meldingsfeltene som kreves, og spesifikt bruker vi nummervalidering på telefon arkivert.

   er en mastergrad en doktorgrad

Kode for skjemavalidering i kantete JS

index.html

Eksempel på vinkelområde Fornavn 
 
Dette arkivert er obligatorisk
Etternavn 
 
Dette arkivert er obligatorisk
E-post 
 
Dette arkivert er obligatorisk
 
Ikke en gyldig e-post
Telefon 
 
Dette arkivert er obligatorisk
 
Dette er ikke en gyldig telefon
Passord 
 
Dette arkivert er obligatorisk
 
Passord mellom 5 og 8 tegn
Beskjed 
 
Dette arkivert er obligatorisk
Sende inn

app.js

var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', funksjon ($ scope) {})

La oss snakke om noe valideringsdirektiv som brukes i skjemaet:

• ng-påkrevd : For å gi det nødvendige feltet
• ng-show : For å vise feilmeldingen basert på tilstanden (sjekk valideringsegenskapene)
• av minlengde : For å gi minimum lengde
• ng-maks lengde : For å gi maksimal lengde
• av-mønster : For å matche et bestemt mønster
• ng-modell : Binder feltet med valideringsegenskaper som $ error, $ valid, etc.

Med dette kommer vi til en slutt på denne Validering in Angular JS-artikkelen. Jeg håper du fikk forståelse for de forskjellige tingene som skal vurderes for formvalidering i Angular JS.

Hvis du ønsker å lære mer om Angular framework, så sjekk ut vårt som kommer med instruktørstyrt liveopplæring og reell prosjektopplevelse. Denne opplæringen vil hjelpe deg med å forstå Angular dybdegående og hjelpe deg med å mestre emnet.

Har du spørsmål til oss? Vennligst nevn det i kommentarfeltet i denne artikkelen, så kommer vi tilbake til deg.