Validering er en metode til godkende brugeren. Det bruges i alle webteknologier som og . Men i dag vil vores fokus være på validering i kantet JS i følgende rækkefølge:
Hvad er formularvalidering?
Formularvalidering er en teknik, hvormed vi kan validere HTML-formularen. Lad os tage et simpelt eksempel for at antage, at en bruger har en HTML-formular, og at HTML-formularen har forskellige felter, dette felt valideres af formvaliderer, når vi vil validere formularen, vi skal bare kontrollere værdien af det bestemte felt med validatorudtrykket .
Hvis regulært udtryk og feltværdien er den samme, kan vi sige, at vores formular er valideret. I HTML-formularen er der forskellige typer valideringer som e-mail, krævet, min, maks, adgangskode osv.
Formvalidering i kantet JS
Lad os tale om, hvordan vi kan validere en form i kantet JS. Angular JS giver forskellige former for formvalideringsegenskaber, som vi kan bruge til at validere formularen eller hente dataene fra formularen.
$ gyldig : Denne egenskab fortæller, om feltet er gyldigt eller ikke ved at anvende den relevante regel om det.
$ ugyldig : Som navnet siger ugyldigt, er dette fliser vejr, feltet er ugyldigt eller ikke baseret på passende regel om det.
$ uberørt : Det returnerer sandt i formularens indtastningsfelt bruges ikke.
$ beskidt : Det returnerer sandt i det indtastningsfelt, der bruges.
$ rørt : BooleanTrue, hvis input er sløret.
For at få adgang til formularen: .
lære ssis trin for trin
Sådan får du adgang til et input: ..
Lad os nu forklare formvalidering i kantet JS med et eksempel, så først laver vi to filer, en er app.js og en anden er index.html. Vores index.htm-fil indeholder en simpel HTML-form, der har vinkelvalidering, og vores app.js-fil indeholder backend-koden til at håndtere formvalidering på index.html-siden.
er hadoop let at lære
Detindex.html
sideindholdsformular medforny
ejendom og hvad det betyder nøjagtigt?
Den nye egenskab i formtagget fortæller HTML'en, at vi kan bruge vores brugerdefinerede formvalidering. Hvis vi ikke giver novalidate-egenskaben, og HTML-formularen valideres ved hjælp af HTML5-standardformularvalideringsegenskaber.
Trin i formvalidering
I vores form oprettede vi 6 felter i vores form, disse er fornavn, efternavn, e-mail, telefon, adgangskode og besked.
Først tilføjer vi den krævede feltvalidator, denne validator fortæller brugerne, at der kræves et specifikt felt.
Dernæst er e-mail-feltet, hvis en bruger ikke giver nogen gyldig e-mail, så sender vores e-mail-validator en e-mail-valideringsfejl.
Vi indstiller minimums- og maksimumlængden i vores adgangskodevalidering, minimumslængden er 5 og den maksimale længde er 8, så brugeren kan give en gyldig adgangskode mellem 5 og 8 tegn.
Endelig indstiller vi telefonen og de krævede meddelelsesfelter og anvender specifikt nummervalidering på den arkiverede telefon.
Kode for formvalidering i kantet JS
index.html
Eksempel på vinkelområde Fornavn
Dette arkiveret er påkrævet
Efternavn
Dette arkiveret er påkrævet
E-mail
Dette arkiveret er påkrævet
Ikke en gyldig e-mail
telefon
Dette arkiveret er påkrævet
lige i tide compiler javaDette er ikke en gyldig telefon
Adgangskode
Dette arkiveret er påkrævet
Adgangskode mellem 5 og 8 tegn
Besked
Dette arkiveret er påkrævet
Indsend
app.js
var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', funktion ($ scope) {})
Lad os tale om et valideringsdirektiv, der bruges i formen:
- ng-krævet : Til levering af det krævede felt
- ng-show : For at vise fejlmeddelelsen baseret på betingelsen (kontroller valideringsegenskaberne)
- af minlængde : Til levering af minimumslængde
- ng-maxlængde : Til maksimal længde
- af mønster : For at matche et bestemt mønster
- ng-model : Binder feltet med valideringsegenskaber som $ error, $ valid osv.
Med dette kommer vi til en afslutning på denne validering i Jular-artiklen. Jeg håber, du har fået en forståelse af de forskellige ting, der skal overvejes for formvalidering i Angular JS.
Hvis du ønsker at lære mere om Angular framework, så tjek vores som kommer med instruktørstyret live træning og projektoplevelse i det virkelige liv. Denne træning hjælper dig med at forstå vinklet i dybden og hjælper dig med at opnå mestring over emnet.
Har du et spørgsmål til os? Nævn det i kommentarfeltet i denne artikel, så vi vender tilbage til dig.