AngularJS-formuliervalidatie bij indiening: registratievoorbeeld

Formuliervalidatie in AngularJS

Formulier validatie in AngularJS is het proces waarbij wordt gecontroleerd of de gegevens die in een formulier worden ingevoerd juist en volledig zijn. Wanneer een gebruiker het formulier indient, vindt validatie eerst plaats vóór de details worden naar de server gestuurd. Het validatieproces garandeert in de best mogelijke mate dat de details want invoervelden zijn op de juiste manier ingevuld.

Laten we in een realistisch voorbeeld uitgaan van een site waarvoor een registratieformulier moet worden ingevuld voordat volledige toegang tot deze site wordt verkregen. De registratiepagina zou invoervelden hebben voor gebruikersnaam, wachtwoord, b.vmail identiteitskaart enzovoort.

Bijvoorbeeld de email id moet altijd het formaat hebben van gebruikersnaam@site.domein; als iemand alleen de gebruikersnaam invoert in het email id, dan zou de validatie idealiter moeten mislukken. Bij validatie wordt dus gekeken naar het uitvoeren van deze basiscontroles vóór de details worden naar de server 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 laten we de gebruiker een eenvoudig registratieformulier zien waarin de gebruiker de moet invoerentails zoals een gebruikersnaam, wachtwoord, email ID en leeftijd.

Het formulier bevat validatiecontroles om ervoor te zorgen dat de gebruiker de informatie op de juiste manier invoert.

Formuliervalidatie met HTML5

<!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>
        &nbsp;&nbsp;&nbsp;&nbsp;
        Enter your user name:
        <input type="text"  name="name" required><br><br>&nbsp;&nbsp;&nbsp;

        Enter your password:&nbsp;&nbsp;&nbsp;
        <input type="password"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="email"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your age:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="number" /><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="submit" value="Submit"/>
    </form>
</div>

</body>
</html>

Code Uitleg

  1. Voor het tekstinvoertype gebruiken we het attribuut 'vereist'. Dit betekent dat de tekstbox kan niet leeg zijn wanneer het formulier wordt ingediend, en er moet een soort tekst in de tekst aanwezig zijnbox.
  2. Het volgende invoertype is wachtwoord. Omdat het invoertype is gemarkeerd als wachtwoord, wordt de tekst gemaskeerd wanneer de gebruiker tekst in het veld invoert.
  3. Omdat het invoertype is opgegeven als email, de tekst in de box moet overeenkomen met het patroon naam@site.domein.
  4. Wanneer het invoertype is gemarkeerd als een getal en een gebruiker een teken probeert in te voeren met behulp van het toetsenbord of het alfabet, wordt dit niet in de tekst ingevoerdbox.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert voor AngularJS-formuliervalidatie bij het indienen.

uitgang

Formuliervalidatie met HTML5

Om de formuliervalidatie in actie te zien, klikt u op de knop Verzenden zonder enige informatie op het scherm in te voeren.

Formuliervalidatie met HTML5

Nadat op de verzendknop is geklikt, verschijnt er een pop-upwing een validatiefout 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.

Formuliervalidatie met HTML5

Wanneer de gebruiker een waarde invoert in de wachtwoordcontrole, ziet u het '*'-symbool dat wordt gebruikt om de ingevoerde tekens te maskeren.

Formuliervalidatie met HTML5

Laten we dan de verkeerde e invoerenmail id en klik op de knop Verzenden. Nadat op de verzendknop is geklikt, verschijnt er een pop-up showing een validatiefout dat het veld het @-symbool moet hebben.

Dus de validatie voor de controle die was gemarkeerd als een email control zorgt ervoor dat de foutmelding wordt weergegeven als de gebruiker geen juiste e invoertmail ID in het tekstveld.

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 de aanvullende eigenschappen ter validatie. AngularJS biedt de volgende informatiewing eigenschappen voor controles 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 krijgen gewoon een eenvoudig tekstveld waarin de gebruiker een onderwerpnaam in de tekst moet invoeren box. Als dit niet gebeurt, wordt er een validatiefout geactiveerd en wordt de foutmelding aan de gebruiker getoond.

Formuliervalidatie met $dirty, $valid, $invalid, $pristine

<!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

  1. 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.
  2. De ... gebruiken "novalidate”-eigenschap om ervoor te zorgen dat het HTML-formulier AngularJS in staat stelt de validatie uit te voeren.
  3. We gebruiken de ng-show-richtlijn om te controleren op de eigendommen "$dirty" en "$invalid". Dit betekent dat als de tekstbox is gewijzigd, dan is de eigenschapswaarde “$dirty” waar. Ook in het geval dat de tekstbox waarde null is, wordt de eigenschap “$invalid” waar. Dus als beide eigenschappen waar zijn, mislukt de validatie voor het besturingselement. Als beide waarden dus waar zijn, zal de ng-show ook waar worden en zal de span-controle met de rode kleurtekens worden weergegeven.yed.
  4. Hierin controleren we de eigenschap “$error”, die ook als waar wordt geëvalueerd, omdat we voor het besturingselement hebben aangegeven dat er waarde voor het besturingselement moet worden ingevoerd. In een dergelijk geval, waarbij er geen gegevens in de tekst zijn ingevoerd box de bereikcontrole toont de tekst “Gebruikersnaam is vereist”.
  5. Als de tekstbox controlewaarde 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.
  6. In de controller stellen we alleen de beginwaarde van de tekst inbox waarde toe aan de tekst 'AngularJS'. Dit wordt alleen gedaan om een ​​standaardwaarde voor de tekst in te stellenbox wanneer het formulier voor het eerst wordt weergegevenyed. Het laat beter zien hoe de validatie voor de tekst plaatsvindtbox veld.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

uitgang

Formuliervalidatie met $dirty, $valid, $invalid, $pristine

Wanneer het formulier voor het eerst wordt weergegevenyed, de tekstbox geeft de waarde van “AngularJS” weer en de “verzendknop” is ingeschakeld. Zodra u de tekst uit het besturingselement verwijdert, wordt de validatiefoutmelding ingeschakeld en is de knop Verzenden uitgeschakeld.

Formuliervalidatie met $dirty, $valid, $invalid, $pristine

De bovenstaande schermafbeelding laat twee dingen zien

  • De knop Verzenden is uitgeschakeld
  • Er staat geen onderwerpnaam in de onderwerptekst box. 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 krijgen gewoon een eenvoudig formulier met een tekstbox controle, wat een verplicht veld is. Er moet een foutmelding verschijnenyed als deze controle niet is ingevuld.

Formuliervalidatie met AngularJS Auto Validate

<!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

  1. Eerst moeten we het script “jcs-auto-validate.js” opnemen, dat alle automatische validatiefunctionaliteit heeft.
  2. We moeten ervoor zorgen dat elk element inclusief de “div-tag” in een “form-group” -klasse wordt geplaatst.
  3. 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.
  4. Neem de jcs-autovalidate op in uw AngularJS JS-module.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

uitgang

Formuliervalidatie met AngularJS Auto Validate

Wanneer u uw code uitvoert, wordt het bovenstaande formulier standaard weergegeven volgens de HTML-code.

Formuliervalidatie met AngularJS Auto Validate

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.

Gebruikersfeedback met Ladda-knoppen

<!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

  1. 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.
  2. 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.
  3. 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.
  4. De module 'AngularJS-ladda' moet worden toegevoegd aan de AngularJS.JS-applicatie om het ladda-framework te laten werken.
  5. 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.
  6. 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 met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

uitgang

Gebruikersfeedback met Ladda-knoppen

Wanneer het formulier voor het eerst wordt weergegevenyed, wordt de verzendknop in zijn eenvoudige vorm weergegeven.

Gebruikersfeedback met Ladda-knoppen

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.

Samengevat

  • Validatie voor de tekstbox HTML-besturingselementen kunnen worden uitgevoerd door het attribuut 'required' te gebruiken.
  • In HTML5 zijn er nieuwe bedieningselementen toegevoegd, zoals wachtwoord, email, en nummer die 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.