AngularJS-formulärvalidering vid inlämning: Registreringsexempel
James Hartman
Formulärvalidering i AngularJS
Formvalidering i AngularJS är processen för att säkerställa att uppgifterna som anges i ett formulär är korrekta och fullständiga. När en användare skickar in formuläret sker validering först innan detaljerna skickas till servern. Valideringsprocessen säkerställer i bästa möjliga utsträckning att uppgifterna för inmatningsfälten matas in på rätt sätt.
I ett verkligt exempel, låt oss anta en webbplats som kräver att ett registreringsformulär fylls i innan du får full tillgång till denna webbplats. Registreringssidan skulle ha inmatningsfält för användarnamn, lösenord, e-postadress och så vidare.
Till exempel måste e-post-ID alltid vara i formatet användarnamn@webbplats.domän; om någon bara anger användarnamnet i e-post-id:t, då skulle valideringen helst misslyckas. Så validering ser på att göra dessa grundläggande kontroller innan detaljerna skickas till servern för vidare bearbetning.
Formulärvalidering med HTML5
Formulärvalidering är processen för förvalidering av information som användaren matat in i ett webbformulär innan den skickas till servern. Det är alltid bättre att validera informationen på klientsidan själv. Detta beror på att det tillför mindre omkostnader om användaren skulle behöva presenteras med formuläret igen om den angivna informationen var felaktig.
Låt oss ta en titt på hur AngularJS-formulärvalidering kan utföras i HTML5.
I vårt exempel kommer vi att visa ett enkelt registreringsformulär för användaren där användaren behöver ange detaljer som användarnamn, lösenord, e-postadress och ålder.
Formuläret kommer att ha valideringskontroller för att säkerställa att användaren anger informationen på ett korrekt sätt.
<!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>
Kodförklaring
- För textinmatningstypen använder vi attributet 'required'. Det betyder att textrutan inte kan vara tom när formuläret skickas, och någon form av text bör finnas i textrutan.
- Nästa inmatningstyp är lösenord. Eftersom inmatningstypen är markerad som lösenord, kommer den att maskeras när användaren skriver in någon text i fältet.
- Eftersom inmatningstypen anges som e-post måste texten i rutan matcha mönstret namn@webbplats.domän.
- När inmatningstypen är markerad som en siffra, om en användare försöker skriva in ett tecken med tangentbordet eller alfabetet, kommer det inte att skrivas in i textrutan.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren för AngularJS-formulärvalidering vid inlämning.
Produktion
För att se formulärvalideringen i aktion, klicka på knappen Skicka utan att ange någon information på skärmen.
När du har klickat på knappen Skicka kommer ett popup-fönster som visar ett valideringsfel att fältet måste fyllas i.
Så valideringen för kontrollen som markerats som obligatorisk, gör att felmeddelandet visas om användaren inte anger något värde i textfältet.
När användaren anger något värde i lösenordskontrollen kommer du att märka "*"-symbolen som används för att maskera tecknen som skrivs in.
Låt oss sedan ange fel e-postadress och klicka på knappen Skicka. När du har klickat på knappen Skicka visas ett popup-fönster som visar ett valideringsfel att fältet måste ha symbolen @.
Så valideringen för kontrollen som markerades som en e-postkontroll kommer att göra att felmeddelandet visas om användaren inte anger ett korrekt e-post-ID i textfältet.
Slutligen, när du försöker skriva in några tecken i ålderstextkontrollen kommer det inte att skrivas in på skärmen. Kontrollen kommer endast att fyllas med ett värde när ett nummer anges i kontrollen.
Formulärvalidering med $dirty, $valid, $invalid, $pristine
AngularJS tillhandahåller sina ytterligare egenskaper för validering. AngularJS tillhandahåller följande egenskaper för kontroller för valideringsändamål
- $smutsigt – Användaren har interagerat med kontrollen
- $giltig – Fältets innehåll är giltigt
- $ogiltig – Fältets innehåll är ogiltigt
- $orörda – Användaren har ännu inte interagerat med kontrollen
Nedan är stegen som måste följas för att utföra vinkelvalidering.
Steg 1) Använd egenskapen no validate när du deklarerar formuläret. Den här egenskapen talar om för HTML5 att valideringen skulle göras av AngularJS.
Steg 2) Se till att formuläret har ett namn definierat för det. Anledningen till detta är att formulärnamnet kommer att användas när man utför Angular-validering.
Steg 3) Se till att varje kontroll också har ett namn definierat för sig. Anledningen till att göra detta är att kontrollnamnet kommer att användas när man utför Angular-validering.
Steg 4) Använd ng-show direktiv för att kontrollera egenskaperna $dirty, $invalid och $valid för kontrollerna.
Låt oss titta på ett exempel, som innehåller de ovan nämnda stegen.
I vårt exempel,
Vi kommer bara att ha ett enkelt textfält där användaren måste ange ett ämnesnamn i textrutan. Om detta inte görs kommer ett valideringsfel att utlösas och felmeddelandet visas för användaren.
<!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>
Kodförklaring
- Observera att vi har gett ett namn för formuläret som är "myForm". Detta krävs när du kommer åt kontrollerna på formuläret för AngularJS-validering.
- Genom att använda egenskapen "novalidate" för att säkerställa att HTML-formuläret tillåter AngularJS att utföra valideringen.
- Vi använder ng-show-direktivet för att leta efter egenskapen "$dirty" och "$invalid". Detta betyder att om textrutan har ändrats kommer egenskapsvärdet "$dirty" att vara sant. Dessutom, i fallet där textbox-värdet är null, kommer egenskapen "$invalid" att bli sann. Så om båda egenskaperna är sanna, kommer valideringen att misslyckas för kontrollen. Därför, om båda värdena är sanna, kommer ng-showen också att bli sann, och spankontrollen med de röda färgtecknen kommer att visas.
- I detta kontrollerar vi egenskapen "$error" som också utvärderas till sant eftersom vi har nämnt för kontrollen att värdet ska anges för kontrollen. I ett sådant fall, där det inte finns några inmatade data i textrutan, kommer spankontrollen att visa texten "Användarnamn krävs".
- Om textrutans kontrollvärde är ogiltigt vill vi också inaktivera knappen Skicka så att användaren inte kan skicka formuläret. Vi använder egenskapen "ng-disabled" för kontrollen för att göra detta baserat på det villkorliga värdet för egenskapen "$dirty" och "$invalid" för kontrollen.
- I kontrollern ställer vi bara in det initiala värdet för textboxvärdet till texten 'AngularJS'. Detta görs bara för att ställa in ett standardvärde för textrutan när formuläret först visas. Det visar bättre hur valideringen sker för textrutefältet.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion
När formuläret först visas visar textrutan värdet på "AngularJS" och "skicka-knappen" är aktiverad. Så snart du tar bort texten från kontrollen aktiveras valideringsfelmeddelandet och knappen Skicka inaktiveras.
Ovanstående skärmdump visar två saker
- Skicka-knappen är inaktiverad
- Det finns inget ämnesnamn i ämnestextrutan. Därför avfyras felmeddelandet "Användarnamn krävs."
Formulärvalidering med AngularJS Auto Validate
Det finns en möjlighet i AngularJS att ha validerat alla kontroller på ett formulär automatiskt utan att behöva skriva anpassad kod för valideringen. Detta kan göras genom att inkludera en anpassad modul som heter "jcs-AutoValidate."
Med denna modul på plats behöver du inte placera någon speciell kod för att utföra valideringen eller visa felmeddelanden. Allt detta hanteras av koden inuti JCS-AutoValidate.
Låt oss titta på ett enkelt exempel på hur man uppnår detta.
I detta exempel,
Vi kommer bara att ha ett enkelt formulär med en textrutekontroll som är ett obligatoriskt fält. Ett felmeddelande bör visas om denna kontroll inte är ifylld.
<!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>
Kodförklaring
- Först måste vi inkludera skriptet "jcs-auto-validate.js" som har alla funktioner för automatisk validering.
- Vi måste se till att varje element inklusive "div-taggen" placeras i en "form-group"-klass.
- Behöver också se till att varje element (som är ett HTML-element såsom input control, span control, div control och så vidare) såsom input controls också placeras i form-group-klassen.
- Inkludera jcs-autovalidate i din AngularJS JS-modul.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion
Som standard när du kör din kod kommer ovanstående formulär att visas enligt HTML-koden.
Om du försöker skicka formuläret kommer felmeddelandet att dyka upp som säger "Detta fält är obligatoriskt." Allt detta görs av alternativet JCS-AutoValidate.
Användarfeedback med Ladda-knappar
"ladda"-knapparna är ett speciellt ramverk byggt för knappar ovanpå JavaScript för att ge en visuell effekt till knappar när de trycks ned.
Så om en knapp får attributet "ladda" och trycks in, kommer en snurreffekt att visas. Det finns också olika datastilar tillgängliga för knappen för att ge ytterligare visuella effekter.
Låt oss titta på ett exempel på hur man ser "ladda"-knappar i aktion. Vi kommer bara att se ett enkelt formulär som har en skicka-knapp. När knappen trycks in visas en snurreffekt 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>
Kodförklaring
- Vi använder "ng-submit"-direktiv för att anropa en funktion som heter "skicka." Denna funktion kommer att användas för att ändra ladda-attributet för skicka-knappen.
- Ladda-attributet är ett speciellt attribut för ladda-ramverket. Det är detta attribut som lägger till spin-effekten till kontroll. Vi ställer in värdet på ladda-attributet till variabeln som skickar in.
- Egenskapen datastil är återigen ett ytterligare attribut som erbjuds av ladda ramverket, som bara lägger till en annan visuell effekt till skicka-knappen.
- Modulen 'AngularJS-ladda' måste läggas till i applikationen AngularJS.JS för att ladda ramverket ska fungera.
- Inledningsvis definierar vi och ställer in värdet på en variabel som kallas "submitting" till false. Detta värde är inställt för ladda-attributet för skicka-knappen. Genom att initialt ställa in detta på falskt säger vi att vi inte vill att skicka-knappen ska ha ladda-effekten än.
- Vi deklarerar en funktion som anropas när du trycker på knappen Skicka. I den här funktionen ställer vi in "sändning" till sant. Detta gör att ladda-effekten appliceras på skicka-knappen.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion
När formuläret först visas visas knappen Skicka i sin enkla form.
När du trycker på sändningsknappen ställs den sändande variabeln i kontrollern till sann. Detta värde skickas till "ladda"-attributet för skicka-knappen, vilket orsakar knappens snurreffekt.
Sammanfattning
- Validering av textboxens HTML-kontroller kan göras genom att använda attributet 'required'.
- I HTML5 har nya kontroller lagts till som lösenord, e-post och nummer som ger sina egna valideringar.
- Formulärvalidering i AngularJS sköts genom att titta på värdena $dirty, $valid, $invalid och $pristine för en formulärkontroll.
- Automatisk validering i AngularJS-applikationer kan också uppnås genom att använda JCS-autovalideringsmodulen.
- Ladda-knappar kan läggas till i en Angular.js-applikation för att ge användaren en lite förbättrad visuell känsla när knappen trycks ned.
