Hvordan implementeres formvalidering i kantet JS?

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 formvalidering?
• Formvalidering i kantet JS
• Trin i formvalidering
• Kode

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.htmlsideindholdsformular medfornyejendom 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.

1. Først tilføjer vi den krævede feltvalidator, denne validator fortæller brugerne, at der kræves et specifikt felt.

2. 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.

3. 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.

4. 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 java
 
Dette 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.