Hoe vormvalidatie in Angular JS implementeren?

Validatie is een methode om authenticeren de gebruiker. Het wordt gebruikt in alle webtechnologieën zoals en . Maar vandaag zal onze focus liggen op validatie in Angular JS in de volgende volgorde:

• Wat is formuliervalidatie?
• Formuliervalidatie in Angular JS
• Stappen in formuliervalidatie
• Code

Wat is formuliervalidatie?

Formuliervalidatie is een techniek waarmee we het HTML-formulier kunnen valideren. Laten we een eenvoudig voorbeeld nemen om te veronderstellen dat een gebruiker een HTML-formulier heeft en dat HTML-formulier verschillende velden heeft, dit veld wordt gevalideerd door formuliervalidator. Als we het formulier willen valideren hoeven we alleen de waarde van het specifieke veld te controleren met de validator-uitdrukking .

Als reguliere expressie en de veldwaarde hetzelfde zijn, kunnen we zeggen dat ons formulier is gevalideerd. In het HTML-formulier zijn er verschillende soorten validaties, zoals e-mail, vereist, min, max, wachtwoord, enz.

Formuliervalidatie in Angular JS

Laten we het hebben over hoe we een formulier kunnen valideren in hoekige JS. Angular JS biedt verschillende soorten formuliervalidatie-eigenschappen die we kunnen gebruiken om het formulier te valideren of om de gegevens uit het formulier te halen.

• $ geldig : Deze eigenschap geeft aan of het veld geldig is of niet door de juiste regel daarop toe te passen.

• $ ongeldig : Zoals de naam ongeldig zegt, zijn deze tegels weer het veld ongeldig of niet gebaseerd op de juiste regel daarop.

• $ ongerept : Het zal true retourneren als het formulierinvoerveld niet wordt gebruikt.

  
  
  

  hoe u een logboekbestand in java maakt

• $ vuil : Het zal true retourneren in het formulierinvoerveld dat wordt gebruikt.

• $ aangeraakt : Boolean Waar als de invoer vervaagd is.

Om toegang te krijgen tot het formulier: .

Om toegang te krijgen tot een ingang: ..

Laten we nu de formuliervalidatie in hoekige JS met een voorbeeld uitleggen, dus eerst maken we twee bestanden, een is app.js en een ander is index.html. Ons index.htm-bestand bevat een eenvoudig HTML-formulier met de hoekvalidatie en ons app.js-bestand bevat de back-endcode om de formuliervalidatie op de index.html-pagina af te handelen.

hoe je een diepe kopie maakt in java

Deindex.htmlpagina-inhoud formulier metnovalidateeigendom en wat dat precies betekent?

De novalidate-eigenschap in de formuliertag vertelt de HTML dat we onze aangepaste formuliervalidatie kunnen gebruiken. Als we de eigenschap novalidate niet geven, wordt het HTML-formulier gevalideerd met behulp van de standaard HTML5-eigenschappen voor formuliervalidatie.

Stappen in formuliervalidatie

In ons formulier hebben we 6 velden gemaakt in ons formulier, dit zijn voornaam, achternaam, e-mailadres, telefoonnummer, wachtwoord en bericht.

1. Eerst voegen we de vereiste veldvalidator toe, deze validator vertelt de gebruikers dat een specifiek veld vereist is.

2. Het volgende is het e-mailveld. Als een gebruiker geen geldig e-mailadres geeft, geeft onze e-mailvalidator een e-mailvalidatiefout.

3. We stellen de minimum en de maximum lengte vast in onze wachtwoord validatie, de minimum lengte is 5 en de maximum lengte is 8 zodat de gebruiker een geldig wachtwoord kan geven tussen 5 en 8 karakters.

4. Ten slotte stellen we de telefoon en de vereiste berichtvelden in en passen we specifiek nummervalidatie toe op de telefoon.

Code voor formuliervalidatie in Angular JS

index.html

Voorbeeld van een hoekbereik Voornaam 
 
Dit ingediend is vereist
Achternaam 
 
Dit ingediend is vereist
E-mail 
 
Dit ingediend is vereist
 
Geen geldig e-mailadres
Telefoon 
 
Dit ingediend is vereist
 
Dit is geen geldig telefoonnummer
Wachtwoord 
 
Dit ingediend is vereist
wat serialiseerbaar is in java
 
Wachtwoord tussen 5 en 8 tekens
Bericht 
 
Dit ingediend is vereist
Verzenden

app.js

var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', functie ($ scope) {})

Laten we het hebben over enkele validatierichtlijnen die in het formulier worden gebruikt:

• ng-vereist : Voor het verstrekken van het vereiste veld
• ng-show : Om het foutbericht weer te geven op basis van de conditie (controleer de validatie-eigenschappen)
• van minlengte : Voor het verstrekken van een minimale lengte
• ng-maxlength : Voor het verstrekken van de maximale lengte
• van patroon : Om bij een specifiek patroon te passen
• ng-model : Bindt het veld met validatie-eigenschappen zoals $ error, $ valid, etc.

Hiermee komen we aan het einde van dit artikel Validation in Angular JS. Ik hoop dat je inzicht hebt gekregen in de verschillende dingen waarmee je rekening moet houden bij formuliervalidatie in Angular JS.

Als je meer wilt weten over Angular framework, bekijk dan onze die wordt geleverd met live training onder leiding van een instructeur en real-life projectervaring. Deze training zal je helpen Angular diepgaand te begrijpen en je te helpen het onderwerp onder de knie te krijgen.

Heeft u een vraag voor ons? Vermeld het in het opmerkingengedeelte van dit artikel en we nemen contact met u op.