Validatie is het proces dat ervoor zorgt dat de gegevens correct en volledig zijn.
Laten we in een realistisch voorbeeld een site aannemen waarvoor een registratieformulier moet worden ingevuld voordat volledige toegang tot deze site wordt verkregen. De registratiepagina zou invoervelden hebben voor gebruikersnaam, wachtwoord, e-mail-ID enzovoort.
Wanneer de gebruiker het formulier indient, vindt normaal gesproken eerst een validatie plaats voordat de details naar de server worden verzonden. Deze validatie zou proberen om er zo goed mogelijk voor te zorgen dat de details van de invoervelden op de juiste manier worden ingevoerd.
Het e-mail-ID moet bijvoorbeeld altijd de indeling Dit e-mailadres wordt beveiligd tegen spambots. JavaScript moet ingeschakeld zijn om het te kunnen bekijken. als iemand alleen de gebruikersnaam in de e-mail-ID invoert, zou de validatie idealiter moeten mislukken. Dus validatie kijkt naar het uitvoeren van deze basiscontroles voordat de details naar de server worden gestuurd voor verdere verwerking.
In deze tutorial leer je-
- Formuliervalidatie met HTML5
- Formulier validatie met $ dirty, $ valid, $ invalid, $ pristine
- Formuliervalidatie met behulp van AngularJS Auto Validate
- Gebruikersfeedback met Ladda-knoppen
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 clientzijde zelf te valideren. Dit komt omdat het minder overhead toevoegt als de gebruiker het formulier opnieuw moet krijgen als de ingevoerde informatie verkeerd is.
Laten we eens kijken hoe formuliervalidatie kan worden uitgevoerd in HTML5.
In ons voorbeeld laten we een eenvoudig registratieformulier zien aan de gebruiker waarin de gebruiker details moet invoeren, zoals een gebruikersnaam, wachtwoord, e-mailadres en leeftijd.
Het formulier heeft validatiecontroles om ervoor te zorgen dat de gebruiker de informatie op de juiste manier invoert.
Event Registration Guru99 Global Event
Code Verklaring:
- Voor het type tekstinvoer gebruiken we het 'vereiste' attribuut. Dit betekent dat het tekstvak niet leeg mag zijn wanneer het formulier wordt verzonden, en dat er een soort tekst in het tekstvak moet staan.
- Het volgende invoertype is wachtwoord. Aangezien het invoertype is gemarkeerd als wachtwoord, wordt deze 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 Dit e-mailadres is beschermd tegen spambots. JavaScript moet ingeschakeld zijn om het te kunnen bekijken.
- Als het invoertype is gemarkeerd als een cijfer en een gebruiker probeert een teken in te voeren met behulp van het toetsenbord of het alfabet, wordt dit niet in het tekstvak ingevoerd.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Om de formuliervalidatie in actie te zien, klikt u op de knop Verzenden zonder enige informatie op het scherm in te voeren.
Nadat op de verzendknop is geklikt, verschijnt er een pop-up met een validatiefout dat het veld moet worden ingevuld.
Dus de validatie voor de controle die als vereist was gemarkeerd, zorgt ervoor dat de foutmelding wordt weergegeven als de gebruiker geen waarde in het tekstveld invoert.
Wanneer de gebruiker een waarde invoert in het wachtwoordbeheer, ziet u het symbool '*' dat wordt gebruikt om de ingevoerde tekens te maskeren.
Laten we dan het verkeerde e-mailadres invoeren en op de verzendknop klikken. Nadat op de verzendknop is geklikt, verschijnt er een pop-up met een validatiefout dat het veld het @ -symbool moet hebben.
Dus de validatie voor het besturingselement dat was gemarkeerd als een e-mailbesturingselement, zorgt ervoor dat het foutbericht wordt weergegeven als de gebruiker geen correct e-mailadres invoert in het tekstveld.
Ten slotte, wanneer u tekens probeert in te voeren in de leeftijdstekstcontrole, wordt deze niet op het scherm ingevoerd. Het besturingselement wordt alleen gevuld met een waarde wanneer er een getal in het besturingselement wordt ingevoerd.
Formulier validatie met $ dirty, $ valid, $ invalid, $ pristine
AngularJS biedt zijn aanvullende eigenschappen voor validatie. AngularJS biedt de volgende eigenschappen voor besturingselementen voor validatiedoeleinden
- $ dirty - De gebruiker heeft interactie gehad met het besturingselement
- $ valid - De veldinhoud is geldig
- $ invalid - De veldinhoud is ongeldig
- $ pristine - De gebruiker heeft nog geen interactie gehad met het besturingselement
Hieronder staan de stappen die moeten worden gevolgd om Angular-validatie uit te voeren.
Stap 1) Gebruik de eigenschap no validate bij het aangeven van het formulier. Deze eigenschap vertelt HTML5 dat de validatie zou worden gedaan door AngularJS.
Stap 2) Zorg ervoor dat er een naam voor het formulier 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 richtlijn om te controleren op de $ dirty, $ invalid en $ valid eigenschappen voor de controls.
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 gebeurt, wordt een validatiefout geactiveerd en wordt het foutbericht aan de gebruiker getoond.
Event Registration Guru99 Global Event
Code Verklaring:
- Merk op dat we het formulier een naam hebben gegeven die "myForm" is. Dit is vereist bij het openen van de besturingselementen op het formulier voor AngularJS-validatie.
- Gebruik de eigenschap "novalidate" om ervoor te zorgen dat het HTML-formulier AngularJS in staat stelt de validatie uit te voeren.
- We gebruiken de richtlijn ng-show om te controleren op de eigenschap "$ dirty" en "$ invalid". Dit betekent dat als het tekstvak is gewijzigd, de waarde van de eigenschap "$ dirty" waar zal zijn. Ook in het geval dat de tekstvakwaarde 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, wordt de ng-show ook waar, en wordt de span control met de rode kleurtekens weergegeven.
- Hierin controleren we de eigenschap "$ error" die ook evalueert naar true omdat we voor de controle hebben vermeld dat de waarde voor de controle moet worden ingevoerd. In dat geval, als er geen gegevens zijn ingevoerd in het tekstvak, zal de span control de tekst "Gebruikersnaam is vereist" weergeven.
- Als de controlewaarde van het tekstvak ongeldig is, willen we ook de verzendknop 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 het tekstvak in te stellen wanneer het formulier voor het eerst wordt weergegeven. Het laat beter zien hoe de validatie plaatsvindt voor het tekstvakveld.
Als de code met succes 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 is de knop "Verzenden" ingeschakeld. Zodra u de tekst uit het besturingselement verwijdert, wordt het validatiefoutbericht ingeschakeld en is de knop Verzenden uitgeschakeld.
De bovenstaande schermafbeelding toont twee dingen
- De knop Verzenden is uitgeschakeld
- Er is geen onderwerpnaam in het tekstvak Onderwerp. Daarom wordt de foutmelding "Gebruikersnaam is vereist."
Formuliervalidatie met behulp van AngularJS Auto Validate
Er is een mogelijkheid in AngularJS om alle besturingselementen op een formulier automatisch te laten valideren zonder dat er aangepaste code hoeft te worden geschreven voor de validatie. Dit kan worden gedaan door een aangepaste module op te nemen met de naam "jcs-AutoValidate."
Met deze module op zijn plaats 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 de 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. Als dit besturingselement niet is ingevuld, moet er een foutmelding worden weergegeven.
Event Registration Guru99 Event
Code Verklaring:
- Ten eerste moeten we het "jcs-auto-validate.js" -script opnemen dat alle automatische validatiefuncties heeft.
- We moeten ervoor zorgen dat elk element inclusief de "div-tag" in een "form-group" -klasse wordt geplaatst.
- U moet er ook voor zorgen dat elk element (dat een HTML-element is, zoals invoerbesturing, spanbesturing, div-besturing enzovoort), zoals de invoerbesturingselementen, ook in de formuliergroepklasse worden geplaatst.
- Neem de jcs-autovalidate op in uw AngularJS JS-module.
Als de code met succes 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 het foutbericht met de melding "Dit veld is verplicht." Dit alles wordt gedaan door de optie JCS-AutoValidate.
Gebruikersfeedbacks met Ladda-knoppen
De "ladda" -knoppen zijn een speciaal raamwerk gebouwd voor knoppen bovenop JavaScript om een visueel effect te geven aan knoppen wanneer ze worden ingedrukt.
Dus als een knop het "ladda" -attribuut krijgt en wordt ingedrukt, wordt een spin-effect getoond. 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 "ladda" -knoppen in actie kunt zien. We gaan gewoon een eenvoudig formulier zien met een verzendknop. Wanneer de knop wordt ingedrukt, wordt een spin-effect op de knop weergegeven.
Event Registration Guru99 Event
Code Verklaring:
- We gebruiken de "ng-submit" -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-raamwerk. Het is dit attribuut dat het spin-effect aan controle toevoegt. We stellen de waarde van het ladda-attribuut in voor het indienen van de variabele.
- De eigenschap data-stijl is weer een extra attribuut dat wordt aangeboden door het ladda-raamwerk, dat alleen een ander visueel effect toevoegt aan de verzendknop.
- De 'AngularJS-ladda' module moet worden toegevoegd aan de AngularJS.JS applicatie om het ladda framework te laten werken.
- In eerste instantie definiëren we en stellen we de waarde van een variabele genaamd 'submitting' in op false. Deze waarde is ingesteld voor het ladda-attribuut van de verzendknop. Door dit in eerste instantie op false in te stellen, zeggen we dat we nog niet willen dat de verzendknop het ladda-effect heeft.
- We declareren een functie die wordt aangeroepen wanneer de verzendknop wordt ingedrukt. In deze functie zetten we de 'submitting' op true. Hierdoor wordt het ladda-effect toegepast op de verzendknop.
Als de code met succes 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 verzendknop weergegeven in zijn eenvoudige vorm.
Wanneer de verzendknop wordt ingedrukt, wordt de verzendvariabele in de controller ingesteld op true. Deze waarde wordt doorgegeven aan het "ladda" -attribuut van de verzendknop, wat het draai-effect van de knop veroorzaakt.
Overzicht
- Validatie voor de HTML-besturingselementen van het tekstvak kan worden gedaan door het 'vereiste' attribuut te gebruiken.
- In HTML5 zijn nieuwe besturingselementen toegevoegd, zoals wachtwoord, e-mailadres en nummer, die hun eigen set validaties bieden.
- Formuliervalidatie in AngularJS wordt verzorgd door te kijken naar de $ dirty, $ valid, $ invalid en $ ongerepte waarden van een formuliercontrole.
- Automatische validatie in AngularJS-applicaties kan ook worden bereikt door de JCS-auto validate-module te gebruiken.
- Ladda-knoppen kunnen worden toegevoegd aan een Angular.js-applicatie om de gebruiker een beetje een verbeterd visueel gevoel te geven wanneer de knop wordt ingedrukt.