AngularJS-formuliervalidatie bij indiening: registratievoorbeeld
James Hartman
Formuliervalidatie in AngularJS
Formulier validatie in AngularJS is het proces om te controleren of de gegevens die in een formulier zijn ingevoerd, correct en volledig zijn. Wanneer een gebruiker het formulier indient, vindt er eerst validatie plaats voordat de gegevens naar de server worden verzonden. Het validatieproces zorgt er zo goed mogelijk voor dat de gegevens voor invoervelden op de juiste manier worden ingevoerd.
In een real-world voorbeeld, laten we een site aannemen die vereist dat een registratieformulier wordt ingevuld voordat volledige toegang tot deze site wordt verkregen. De registratiepagina zou invoervelden hebben voor gebruikersnaam, wachtwoord, e-mailadres enzovoort.
Het e-mailadres moet bijvoorbeeld altijd in de volgende indeling zijn: gebruikersnaam@site.domein; als iemand alleen de gebruikersnaam in het e-mailadres invoert, zou de validatie idealiter moeten mislukken. Validatie kijkt dus naar het uitvoeren van deze basiscontroles voordat de gegevens naar de server worden gestuurd voor verdere verwerking.
Formuliervalidatie met HTML5
Formuliervalidatie is het proces waarbij informatie die door de gebruiker op een webformulier is ingevoerd, vooraf wordt gevalideerd voordat deze naar de server wordt verzonden. Het is altijd beter om de informatie aan de klantzijde zelf te valideren. Dit komt omdat het minder overhead met zich meebrengt als de gebruiker het formulier opnieuw moet zien als de ingevoerde informatie onjuist is.
Laten we eens kijken hoe AngularJS-formuliervalidatie kan worden uitgevoerd in HTML5.
In ons voorbeeld tonen we de gebruiker een eenvoudig registratieformulier waarin de gebruiker gegevens als gebruikersnaam, wachtwoord, e-mailadres en leeftijd moet invoeren.
Het formulier bevat validatiecontroles om ervoor te zorgen dat de gebruiker de informatie op de juiste manier invoert.
<!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>
Code Uitleg
- Voor het tekstinvoertype gebruiken we het 'required'-attribuut. Dit betekent dat het tekstvak niet leeg mag zijn wanneer het formulier wordt verzonden, en dat er een soort tekst in het tekstvak aanwezig moet zijn.
- Het volgende invoertype is wachtwoord. Omdat het invoertype is gemarkeerd als wachtwoord, wordt de tekst gemaskeerd wanneer de gebruiker tekst in het veld invoert.
- Omdat het invoertype is opgegeven als e-mail, moet de tekst in het vak overeenkomen met het patroon naam@site.domein.
- Wanneer het invoertype is gemarkeerd als een getal, wordt een teken dat een gebruiker probeert in te voeren via het toetsenbord of het alfabet, niet in het tekstvak ingevoerd.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert voor AngularJS-formuliervalidatie bij het verzenden.
uitgang
Om de formuliervalidatie in actie te zien, klikt u op de knop Verzenden zonder enige informatie op het scherm in te voeren.
Nadat u op de knop Verzenden hebt geklikt, verschijnt er een pop-up met een validatiefoutmelding waarin staat dat het veld moet worden ingevuld.
De validatie voor het besturingselement dat als vereist is gemarkeerd, zorgt er dus voor dat de foutmelding wordt weergegeven als de gebruiker geen enkele waarde in het tekstveld invoert.
Wanneer de gebruiker een waarde invoert in de wachtwoordcontrole, ziet u het '*'-symbool dat wordt gebruikt om de ingevoerde tekens te maskeren.
Voer dan het verkeerde e-mailadres in en klik op de knop Verzenden. Nadat u op de knop Verzenden hebt geklikt, verschijnt er een pop-up met een validatiefout dat het veld het @-symbool moet hebben.
De validatie voor het besturingselement dat is gemarkeerd als een e-mailbesturingselement, zorgt ervoor dat de foutmelding wordt weergegeven als de gebruiker geen juist e-mailadres in het tekstveld invoert.
Als u ten slotte tekens probeert in te voeren in het leeftijdstekstbesturingselement, wordt dit niet op het scherm ingevoerd. Het besturingselement wordt alleen gevuld met een waarde als er een getal in het besturingselement wordt ingevoerd.
Formuliervalidatie met $dirty, $valid, $invalid, $pristine
angularjs biedt zijn extra eigenschappen voor validatie. AngularJS biedt de volgende eigenschappen voor besturingselementen voor validatiedoeleinden
- $vies – De gebruiker heeft interactie gehad met de besturing
- $geldig – De veldinhoud is geldig
- $ongeldig – De veldinhoud is ongeldig
- $ongerept – De gebruiker heeft nog geen interactie met de besturing gehad
Hieronder staan de stappen die moeten worden gevolgd om Angular-validatie uit te voeren.
Stap 1) Gebruik de eigenschap no validate bij het declareren van het formulier. Deze eigenschap vertelt HTML5 dat de validatie door AngularJS zou worden uitgevoerd.
Stap 2) Zorg ervoor dat er voor het formulier een naam is gedefinieerd. De reden hiervoor is dat bij het uitvoeren van Angular-validatie de formuliernaam wordt gebruikt.
Stap 3) Zorg ervoor dat voor elk besturingselement ook een naam is gedefinieerd. De reden hiervoor is dat bij het uitvoeren van Angular-validatie de controlenaam wordt gebruikt.
Stap 4) Gebruik de ng-show instructie om te controleren op de eigenschappen $dirty, $invalid en $valid voor de besturingselementen.
Laten we eens kijken naar een voorbeeld waarin de bovengenoemde stappen zijn verwerkt.
In ons voorbeeld
We gaan gewoon een eenvoudig tekstveld hebben waarin de gebruiker een onderwerpnaam in het tekstvak moet invoeren. Als dit niet wordt gedaan, wordt een validatiefout geactiveerd en wordt de foutmelding aan de gebruiker getoond.
<!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>
Code Uitleg
- Merk op dat we een naam voor het formulier hebben gegeven: "mijnformulier". Dit is vereist bij toegang tot de bedieningselementen op het formulier voor AngularJS-validatie.
- Gebruik de eigenschap “novalidate” om ervoor te zorgen dat het HTML-formulier AngularJS de validatie laat uitvoeren.
- We gebruiken de ng-show-richtlijn om te controleren op de eigenschap "$dirty" en "$invalid". Dit betekent dat als het tekstvak is gewijzigd, de eigenschapswaarde "$dirty" true zal zijn. Ook zal in het geval dat de waarde van het tekstvak null is, de eigenschap "$invalid" true worden. Dus als beide eigenschappen true zijn, zal de validatie voor de besturing mislukken. Dus als beide waarden true zijn, zal de ng-show ook true worden en zal de span-besturing met de rode tekens worden weergegeven.
- Hierbij controleren we de eigenschap "$error", die ook wordt geëvalueerd als true omdat we voor de besturing hebben vermeld dat de waarde voor de besturing moet worden ingevoerd. In een dergelijk geval, waarbij er geen gegevens in het tekstvak zijn ingevoerd, geeft de spanbesturing de tekst "Gebruikersnaam is vereist" weer.
- Als de waarde van het besturingselement voor het tekstvak ongeldig is, willen we ook de knop Verzenden uitschakelen, zodat de gebruiker het formulier niet kan verzenden. We gebruiken de eigenschap "ng-disabled" voor het besturingselement om dit te doen op basis van de voorwaardelijke waarde van de eigenschap "$dirty" en "$invalid" van het besturingselement.
- In de controller stellen we gewoon de beginwaarde van de tekstvakwaarde in op de tekst 'AngularJS'. Dit wordt alleen gedaan om een standaardwaarde in te stellen voor het tekstvak wanneer het formulier voor het eerst wordt weergegeven. Het laat beter zien hoe de validatie plaatsvindt voor het tekstvakveld.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
uitgang
Wanneer het formulier voor het eerst wordt weergegeven, geeft het tekstvak de waarde van "AngularJS" weer en wordt de "submit button" ingeschakeld. Zodra u de tekst uit het besturingselement verwijdert, wordt het validatiefoutbericht ingeschakeld en wordt de Submit-knop uitgeschakeld.
De bovenstaande schermafbeelding laat twee dingen zien
- De knop Verzenden is uitgeschakeld
- Er is geen onderwerpnaam in het onderwerptekstvak. Daarom wordt de foutmelding "Gebruikersnaam is vereist" weergegeven.
Formuliervalidatie met AngularJS Auto Validate
Er is een mogelijkheid in AngularJS om alle besturingselementen op een formulier automatisch te valideren zonder dat u aangepaste code voor de validatie hoeft te schrijven. Dit kan worden gedaan door een aangepaste module op te nemen met de naam “jcs-AutoValidate.”
Met deze module hoeft u geen speciale code te plaatsen om de validatie uit te voeren of de foutmeldingen weer te geven. Dit wordt allemaal afgehandeld door de code in JCS-AutoValidate.
Laten we eens kijken naar een eenvoudig voorbeeld van hoe u dit kunt bereiken.
In dit voorbeeld
We gaan gewoon een eenvoudig formulier hebben met een tekstvakbesturingselement dat een verplicht veld is. Er zou een foutmelding moeten verschijnen als dit besturingselement niet is ingevuld.
<!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>
Code Uitleg
- Eerst moeten we het script “jcs-auto-validate.js” opnemen, dat alle automatische validatiefunctionaliteit heeft.
- We moeten ervoor zorgen dat elk element inclusief de “div-tag” in een “form-group” -klasse wordt geplaatst.
- Zorg er ook voor dat elk element (dat een HTML-element is, zoals invoerbesturingselement, span-besturingselement, div-besturingselement enzovoort), zoals de invoerbesturingselementen, ook in de klasse form-group wordt geplaatst.
- Neem de jcs-autovalidate op in uw AngularJS JS-module.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
uitgang
Wanneer u uw code uitvoert, wordt het bovenstaande formulier standaard weergegeven volgens de HTML-code.
Als u het formulier probeert te verzenden, verschijnt er een foutmelding: 'Dit veld is verplicht'. Dit alles wordt gedaan door de JCS-AutoValidate-optie.
Gebruikersfeedback met Ladda-knoppen
De “ladda”-knoppen zijn een speciaal raamwerk gebouwd voor knoppen er bovenop JavaScript om een visueel effect te geven aan knoppen wanneer ze worden ingedrukt.
Dus als een knop het attribuut “ladda” krijgt en wordt ingedrukt, wordt er een spin-effect weergegeven. Er zijn ook verschillende gegevensstijlen beschikbaar voor de knop om extra visuele effecten te bieden.
Laten we eens kijken naar een voorbeeld van hoe u de “ladda”-knoppen in actie kunt zien. We gaan alleen een eenvoudig formulier zien met een verzendknop. Wanneer de knop wordt ingedrukt, wordt er een spin-effect op de knop weergegeven.
<!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>
Code Uitleg
- Wij gebruiken de “ng-verzenden'-richtlijn om een functie aan te roepen met de naam 'submit'. Deze functie wordt gebruikt om het ladda-attribuut van de verzendknop te wijzigen.
- Het ladda-attribuut is een speciaal attribuut van het ladda-framework. Het is dit attribuut dat het spin-effect aan de controle toevoegt. We stellen de waarde van het ladda-attribuut in op de variabele die wordt ingediend.
- De data-style eigenschap is opnieuw een extra attribuut dat wordt aangeboden door het ladda-framework, dat alleen een ander visueel effect toevoegt aan de verzendknop.
- De module 'AngularJS-ladda' moet worden toegevoegd aan de AngularJS.JS-applicatie om het ladda-framework te laten werken.
- In eerste instantie definiëren en stellen we de waarde van een variabele genaamd 'submitting' in op false. Deze waarde wordt ingesteld voor het ladda-attribuut van de verzendknop. Door dit in eerste instantie op false in te stellen, zeggen we dat we niet willen dat de verzendknop nu al het ladda-effect heeft.
- We declareren een functie die wordt aangeroepen wanneer op de verzendknop wordt gedrukt. In deze functie stellen we 'submitting' in op true. Hierdoor wordt het ladda-effect toegepast op de verzendknop.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
uitgang
Wanneer het formulier voor het eerst wordt weergegeven, wordt de knop Verzenden in de eenvoudige vorm weergegeven.
Wanneer op de verzendknop wordt gedrukt, wordt de verzendvariabele in de controller op waar gezet. Deze waarde wordt doorgegeven aan het ‘ladda’-attribuut van de verzendknop, wat het spin-effect van de knop veroorzaakt.
Samenvatting
- Validatie voor de HTML-besturingselementen voor tekstvakken kan worden uitgevoerd met behulp van het kenmerk 'required'.
- In HTML5 zijn nieuwe besturingselementen toegevoegd, zoals wachtwoord, e-mailadres en telefoonnummer, die elk hun eigen set validaties bieden.
- Formuliervalidatie in AngularJS wordt verzorgd door te kijken naar de waarden $dirty, $valid, $invalid en $pristine van een formulierbesturingselement.
- Automatische validatie in AngularJS-applicaties kan ook worden bereikt door gebruik te maken van de JCS-auto validate-module.
- Ladda-knoppen kunnen worden toegevoegd aan een Angular.js-applicatie om de gebruiker een beter visueel gevoel te geven wanneer de knop wordt ingedrukt.
