AngularJS-formuliervalidatie
AngularJS kan invoergegevens valideren.
Formuliervalidatie
AngularJS biedt formuliervalidatie aan de clientzijde.
AngularJS bewaakt de status van het formulier en de invoervelden (invoer, tekstgebied, selecteren) en laat u de gebruiker informeren over de huidige status.
AngularJS bevat ook informatie over of ze zijn aangeraakt, of gewijzigd, of niet.
U kunt standaard HTML5-attributen gebruiken om invoer te valideren, of u kunt uw eigen validatiefuncties maken.
Validatie aan de clientzijde kan niet alleen gebruikersinvoer beveiligen. Server-side validatie is ook nodig.
Vereist
Gebruik het HTML5-attribuut requiredom aan te geven dat het invoerveld moet worden ingevuld:
Voorbeeld
Het invoerveld is verplicht:
<form name="myForm">
<input name="myInput" ng-model="myInput"
required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Gebruik het HTML5-type emailom aan te geven dat de waarde een e-mail moet zijn:
Voorbeeld
Het invoerveld moet een e-mail zijn:
<form name="myForm">
<input name="myInput" ng-model="myInput"
type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Formulierstatus en invoerstatus
AngularJS werkt voortdurend de status van zowel het formulier als de invoervelden bij.
Invoervelden hebben de volgende statussen:
$untouchedHet veld is nog niet aangeraakt$touchedHet veld is aangeraakt$pristineHet veld is nog niet gewijzigd$dirtyHet veld is gewijzigd$invalidDe veldinhoud is niet geldig$validDe veldinhoud is geldig
Het zijn allemaal eigenschappen van het invoerveld en zijn of true
of false.
Formulieren hebben de volgende statussen:
$pristineEr zijn nog geen velden gewijzigd$dirtyEen of meer zijn gewijzigd$invalidDe inhoud van het formulier is niet geldig$validDe inhoud van het formulier is geldig$submittedHet formulier is verzonden
Het zijn allemaal eigenschappen van de vorm en zijn of true
of false.
U kunt deze statussen gebruiken om betekenisvolle berichten aan de gebruiker te tonen. Als een veld bijvoorbeeld verplicht is en de gebruiker laat het leeg, moet u de gebruiker een waarschuwing geven:
Voorbeeld
Toon een foutmelding als het veld is aangeraakt EN leeg is:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched
&& myForm.myName.$invalid">The name is required.</span>
CSS-klassen
AngularJS voegt CSS-klassen toe aan formulieren en invoervelden, afhankelijk van hun status.
De volgende klassen worden toegevoegd aan of verwijderd uit invoervelden:
ng-untouchedHet veld is nog niet aangeraaktng-touchedHet veld is aangeraaktng-pristineHet veld is nog niet gewijzigdng-dirtyHet veld is gewijzigdng-validDe veldinhoud is geldigng-invalidDe veldinhoud is niet geldigng-valid-keyEén sleutel voor elke validatie. Voorbeeld:ng-valid-required, handig wanneer er meer dan één ding moet worden gevalideerdng-invalid-keyVoorbeeld:ng-invalid-required
De volgende klassen worden toegevoegd aan of verwijderd uit formulieren:
ng-pristineEr zijn nog geen velden gewijzigdng-dirtyEen of meer velden zijn gewijzigdng-validDe inhoud van het formulier is geldigng-invalidDe inhoud van het formulier is niet geldigng-valid-keyEén sleutel voor elke validatie. Voorbeeld:ng-valid-required, handig wanneer er meer dan één ding moet worden gevalideerdng-invalid-keyVoorbeeld:ng-invalid-required
De klassen worden verwijderd als de waarde die ze vertegenwoordigen false.
Voeg stijlen toe voor deze klassen om uw toepassing een betere en intuïtievere gebruikersinterface te geven.
Voorbeeld
Pas stijlen toe met behulp van standaard CSS:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
Formulieren kunnen ook worden gestyled:
Voorbeeld
Pas stijlen toe voor ongewijzigde (ongerepte) formulieren en voor gewijzigde formulieren:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
Aangepaste validatie
Je eigen validatiefunctie maken is wat lastiger; U moet een nieuwe richtlijn aan uw toepassing toevoegen en de validatie binnen een functie met bepaalde gespecificeerde argumenten afhandelen.
Voorbeeld
Maak uw eigen richtlijn, die een aangepaste validatiefunctie bevat, en verwijs ernaar met behulp van my-directive.
Het veld is alleen geldig als de waarde het teken "e" bevat:
<form name="myForm">
<input name="myInput" ng-model="myInput" required
my-directive>
</form>
<script>
var app = angular.module('myApp',
[]);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element,
attr, mCtrl) {
function myValidation(value)
{
if (value.indexOf("e") > -1)
{
mCtrl.$setValidity('charE',
true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
Voorbeeld uitgelegd:
In HTML wordt naar de nieuwe richtlijn verwezen met het attribuut
my-directive.
In JavaScript beginnen we met het toevoegen van een nieuwe richtlijn met de naam myDirective.
Onthoud dat wanneer u een richtlijn een naam geeft, u een camel case-naam moet gebruiken,
myDirective, maar wanneer u deze aanroept, moet u een -gescheiden naam gebruiken,
my-directive.
Retourneer vervolgens een object waarin u opgeeft dat we nodig hebben ngModel, namelijk de ngModelController.
Maak een koppelingsfunctie die enkele argumenten nodig heeft, waarbij het vierde argument, mCtrl, de ngModelController, is
Specificeer vervolgens een functie, in dit geval genaamd myValidation, waaraan één argument moet doorgegeven worden, dit argument is de waarde van het invoerelement.
Test of de waarde de letter "e" bevat en stel de geldigheid van de modelcontroller in op trueof false.
Voegt ten slotte mCtrl.$parsers.push(myValidation);de
myValidationfunctie toe aan een reeks andere functies, die elke keer dat de invoerwaarde verandert, worden uitgevoerd.
Validatie voorbeeld
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp"
ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<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>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span
style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl',
function($scope) {
$scope.user = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
</html>
Het HTML-formulierkenmerk novalidate wordt gebruikt om de standaardbrowservalidatie uit te schakelen.
Voorbeeld uitgelegd
Het AngularJS-richtlijn ng-model bindt de invoerelementen aan het model.
Het modelobject heeft twee eigenschappen: gebruiker en e-mail .
Vanwege ng-show worden de reeksen met color:red alleen weergegeven als de gebruiker of het e-mailadres $dirty en $invalid is .