AngularJS-skjemavalidering ved innsending: Registreringseksempel
James Hartman
Skjemavalidering i AngularJS
Formvalidering i AngularJS er prosessen for å sikre om dataene som legges inn i et skjema er korrekte og fullstendige. Når en bruker sender inn skjemaet, skjer validering først før detaljene sendes til serveren. Valideringsprosessen sikrer i best mulig grad at detaljene for inndatafelt legges inn på riktig måte.
I et eksempel fra den virkelige verden, la oss anta et nettsted som krever at et registreringsskjema fylles ut før du får full tilgang til dette nettstedet. Registreringssiden vil ha inndatafelt for brukernavn, passord, e-post-ID og så videre.
For eksempel må e-post-ID alltid være i formatet brukernavn@side.domene; 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 sendes til serveren for videre behandling.
Skjemavalidering ved hjelp av HTML5
Skjemavalidering er prosessen med å forhåndsvalidere informasjon som er lagt inn på et nettskjema av brukeren før den sendes til serveren. Det er alltid bedre å validere informasjonen på selve klientsiden. Dette er fordi det gir mindre overhead dersom brukeren måtte presenteres for skjemaet på nytt hvis informasjonen som ble lagt inn var feil.
La oss ta en titt på hvordan AngularJS-skjemavalidering kan utføres i HTML5.
I vårt eksempel vil vi vise ett enkelt registreringsskjema til brukeren der brukeren må angi detaljer som brukernavn, passord, e-post-ID og alder.
Skjemaet vil ha valideringskontroller for å sikre at brukeren legger inn informasjonen på en forsvarlig måte.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form>
Enter your user name:
<input type="text" name="name" required><br><br>
Enter your password:
<input type="password"/><br><br>
Enter your email:
<input type="email"/><br><br>
Enter your age:
<input type="number" /><br><br>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
Kode Forklaring
- For skrivingstypen bruker vi attributtet 'required'. Dette betyr at tekstboksen ikke kan være tom når skjemaet sendes inn, og det bør være en slags tekst i tekstboksen.
- Den neste inndatatypen er passord. Siden inndatatypen er merket som passord, vil den bli maskert når brukeren skriver inn tekst i feltet.
- Fordi inndatatypen er spesifisert som e-post, må teksten i boksen samsvare med mønsteret navn@nettsted.domene.
- Når inndatatypen er merket som et tall, hvis en bruker prøver å skrive inn et hvilket som helst tegn ved hjelp av tastaturet eller alfabetet, vil det ikke bli skrevet inn i tekstboksen.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren for AngularJS-skjemavalidering ved innsending.
Produksjon
For å se skjemavalideringen i aksjon, klikk på Send-knappen uten å legge inn informasjon på skjermen.
Etter at du har klikket på send-knappen, vil det komme en popup som viser en valideringsfeil som feltet må fylles ut.
Så valideringen for kontrollen som ble merket som nødvendig, fører til at feilmeldingen vises hvis brukeren ikke skriver inn noen verdi i tekstfeltet.
Når brukeren skriver inn en verdi i passordkontrollen, vil du legge merke til '*'-symbolet som brukes til å maskere tegnene som legges inn.
La oss deretter skrive inn feil e-post-ID og klikke på send-knappen. Etter at du har klikket på send-knappen, vil det vises en popup som viser en valideringsfeil om at feltet må ha @-symbolet.
Så valideringen for kontrollen som ble merket som en e-postkontroll vil føre til at feilmeldingen vises hvis brukeren ikke skriver inn en riktig e-post-ID i tekstfeltet.
Til slutt, når du prøver å skrive inn tegn i alderstekstkontrollen, vil det ikke bli lagt inn på skjermen. Kontrollen vil kun fylles med en verdi når et tall er lagt inn i kontrollen.
Skjemavalidering med $dirty, $valid, $invalid, $pristine
AngularJS gir sine tilleggsegenskaper for validering. AngularJS gir følgende egenskaper for kontroller for valideringsformål
- $dirty – Brukeren har samhandlet med kontrollen
- $gyldig – Feltinnholdet er gyldig
- $ugyldig – Feltinnholdet er ugyldig
- $urørt – Brukeren har ikke samhandlet med kontrollen ennå
Nedenfor er trinnene som må følges for å utføre vinkelvalidering.
Trinn 1) Bruk egenskapen no validate når du erklærer skjemaet. Denne egenskapen forteller HTML5 at valideringen vil bli utført av AngularJS.
Trinn 2) Sørg for at skjemaet har et navn definert for det. Grunnen til å gjøre dette er at når man utfører Angular validering, vil skjemanavnet bli brukt.
Trinn 3) Sørg for at hver kontroll også har et navn definert for seg. Grunnen til å gjøre dette er at når du utfører Angular validering, vil kontrollnavnet bli brukt.
Trinn 4) Bruke ng-show direktiv for å se etter egenskapene $dirty, $invalid og $valid for kontrollene.
La oss se på et eksempel, som inkluderer de ovennevnte trinnene.
I vårt eksempel,
Vi skal bare ha et enkelt tekstfelt der brukeren må skrive inn et emnenavn i tekstboksen. Hvis dette ikke gjøres, utløses en valideringsfeil, og feilmeldingen vises til brukeren.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
<p>Topic Name:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
</p>
</form>
<script>
var app = angular.module("DemoApp",[]);
app.controller("DemoController",function($scope) {
$scope.Display = function () {
$scope.user='Angular';
}
});
</script>
</body>
</html>
Kode Forklaring
- Merk at vi har gitt et navn for skjemaet som er "myForm". Dette er nødvendig 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 å se etter egenskapene "$dirty" og "$invalid". Dette betyr at hvis tekstboksen har blitt endret, vil "$dirty" egenskapsverdien være sann. I tilfelle der tekstboksverdien er null, vil "$invalid"-egenskapen bli sann. Så hvis begge egenskapene er sanne, vil valideringen mislykkes for kontrollen. Derfor, hvis begge verdiene er sanne, vil ng-showet også bli sann, og spankontrollen med de røde fargetegnene vil vises.
- I dette sjekker vi egenskapen "$error" som også evalueres til sann fordi vi har nevnt for kontrollen at verdien skal angis for kontrollen. I et slikt tilfelle, der det ikke er angitt noen data i tekstboksen, vil spankontrollen vise teksten "Brukernavn kreves".
- Hvis tekstbokskontrollverdien er ugyldig, ønsker vi også å deaktivere send-knappen slik at brukeren ikke kan sende inn skjemaet. Vi bruker egenskapen "ng-disabled" for kontrollen for å gjøre dette basert på den betingede verdien av egenskapene "$dirty" og "$invalid" til kontrollen.
- I kontrolleren setter vi bare startverdien til tekstboksverdien til teksten 'AngularJS'. Dette gjøres bare for å angi en standardverdi til tekstboksen når skjemaet vises for første gang. Den viser bedre hvordan valideringen skjer for tekstboksfeltet.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Produksjon
Når skjemaet først vises, viser tekstboksen verdien av "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 emnenavn i emnetekstboksen. Derfor avfyrer den feilmeldingen "Brukernavn kreves."
Skjemavalidering med AngularJS Auto Validate
Det er en funksjon i AngularJS for å ha validert alle kontroller på et skjema automatisk uten å måtte skrive tilpasset kode for valideringen. 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 oppnår dette.
I dette eksemplet,
Vi skal bare ha et enkelt skjema med en tekstbokskontroll som er et obligatorisk felt. En feilmelding skal vises hvis denne kontrollen ikke er fylt ut.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp">
<div class="form-group">
<form name="myForm" novalidate>
<p>Topic Name:<br></p>
<div class="form-group">
<input class="form-control" type="text" id="user" ng-model="user" required="required"/>
</div>
<div>
<div class="form-group">
<input type="submit">
</div>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>
Kode Forklaring
- Først må vi inkludere "jcs-auto-validate.js"-skriptet som har all autovalideringsfunksjonalitet.
- Vi må sørge for at hvert element inkludert "div-taggen" er plassert i en "form-group"-klasse.
- Må også sørge for at hvert element (som er et HTML-element som input-kontroll, span-kontroll, div-kontroll og så videre) som input-kontroller også er plassert i form-group-klassen.
- Inkluder jcs-autovalidate i din AngularJS JS-modul.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Produksjon
Som standard vil skjemaet ovenfor vises i henhold til HTML-koden når du kjører koden.
Hvis du prøver å sende inn skjemaet, vil feilmeldingen dukke opp som sier "Dette feltet er obligatorisk." Alt dette gjøres av alternativet JCS-AutoValidate.
Tilbakemeldinger fra brukere med Ladda-knapper
"Ladda"-knappene er et spesielt rammeverk bygget for knapper på toppen av JavaScript for å gi en visuell effekt til knapper når de trykkes inn.
Så hvis en knapp får «ladda»-attributtet og trykkes ned, vil en spinneffekt vises. Det er også forskjellige datastiler tilgjengelig for knappen for å gi ytterligere 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 knappen trykkes, vil en spinneffekt vises på knappen.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<div class="form-group">
<form name="myForm" novalidate ng-submit="submit()">
<div>
<button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);
app.controller('DemoController',function($scope) {
$scope.submitting = false;
$scope.submit = function () {
$scope.submitting = true;
}
});
</script>
</body>
</html>
Kode Forklaring
- Vi bruker "ng-send inn"-direktiv for å kalle en funksjon kalt "send." Denne funksjonen vil bli brukt til å endre ladda-attributtet til send-knappen.
- Ladda-attributtet er en spesiell egenskap for ladda-rammeverket. Det er denne egenskapen som legger spinneffekten til kontroll. Vi setter verdien av ladda-attributtet til variabelen som sender inn.
- Datastil-egenskapen er igjen et tilleggsattributt som tilbys av ladda-rammeverket, som bare legger til en annen visuell effekt til send-knappen.
- 'AngularJS-ladda'-modulen må legges til AngularJS.JS-applikasjonen for at ladda-rammeverket skal fungere.
- Til å begynne med definerer og setter vi verdien til en variabel kalt «submitting» til falsk. Denne verdien er satt for ladda-attributtet til send-knappen. Ved å først sette dette til usann, sier vi at vi ikke vil at send-knappen skal ha lasteffekten ennå.
- Vi erklærer en funksjon som kalles opp når send-knappen trykkes. I denne funksjonen setter vi «innsending» til sann. Dette vil føre til at lasteffekten blir brukt på send-knappen.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Produksjon
Når skjemaet først vises, vises send-knappen i sin enkle form.
Når send-knappen trykkes, settes innsendingsvariabelen i kontrolleren til sann. Denne verdien overføres til "ladda"-attributtet til send-knappen som forårsaker spin-effekten til knappen.
Sammendrag
- Validering for tekstboksens HTML-kontroller kan gjøres ved å bruke "required"-attributtet.
- I HTML5 er det lagt til nye kontroller som passord, e-post og nummer som gir sitt eget sett med valideringer.
- Skjemavalidering i AngularJS ivaretas ved å se på verdiene $dirty, $valid, $invalid og $pristine til en skjemakontroll.
- Automatisk validering i AngularJS-applikasjoner kan også oppnås ved å bruke JCS-autovalideringsmodulen.
- Ladda-knapper kan legges til en Angular.js-applikasjon for å gi brukeren en litt forbedret visuell følelse når knappen trykkes.
