Validering är en metod för att autentisera användaren. Det används i alla webbteknologier som och . Men idag kommer vårt fokus att vara på Validering i Angular JS i följande ordning:
Vad är formulärvalidering?
Formvalidering är en teknik genom vilken vi kan validera HTML-formuläret. Låt oss ta ett enkelt exempel för att anta att en användare har ett HTML-formulär och att HTML-formuläret har olika fält, dessa fält valideras av formulärvalidator när vi vill validera formuläret, vi behöver bara kontrollera värdet på det specifika fältet med valideringsuttrycket .
Om reguljärt uttryck och fältvärdet är desamma kan vi säga att vårt formulär är validerat. I HTML-formuläret finns det olika typer av valideringar som e-post, obligatorisk, min, max, lösenord etc.
Formvalidering i kantig JS
Låt oss prata om hur vi kan validera ett formulär i vinklad JS. Angular JS tillhandahåller olika typer av formvalideringsegenskaper som vi kan använda för att validera formuläret eller få data från formuläret.
$ giltigt : Den här egenskapen berättar om fältet är giltigt eller inte genom att tillämpa lämplig regel på det.
$ ogiltigt : Som namnet säger ogiltigt är det här väderfältet ogiltigt eller inte baserat på lämplig regel om det.
orörd : Det kommer att returnera true i formuläret inmatningsfältet används inte.
$ smutsigt : Det kommer att returnera true i det formulär som används.
$ rörd : BooleanTrue om ingången är suddig.
För att komma åt formuläret: .
För att komma åt en ingång: ..
Låt oss nu förklara formvalidering i vinkeljS med ett exempel så först gör vi två filer, en är app.js och en annan är index.html. Vår index.htm-fil innehåller ett enkelt HTML-formulär som har vinkelvalidering och vår app.js-fil innehåller backend-koden för att hantera formulärvalidering på index.html-sidan.
Deindex.htmlsidinnehållsformulär mednovalideraegendom och vad betyder det exakt?
Novalidate-egenskapen i formulärtaggen berättar för HTML att vi kan använda vår anpassade formulärvalidering. Om vi inte ger novalidate-egenskapen och HTML-formuläret valideras med hjälp av HTML5-standardformulärsvalideringsegenskaper.
selen webdriver testng framework exempel
Steg i formvalidering
I vårt formulär skapade vi 6 fält i vårt formulär, det här är förnamn, efternamn, e-post, telefon, lösenord och meddelande.
Först lägger vi till den obligatoriska fältvalidatorn, den här validatorn berättar för användarna att ett specifikt fält krävs.
Nästa är e-postfältet om en användare inte ger något giltigt e-postmeddelande, skickar vår e-postvaliderare ett e-postvalideringsfel.
Vi ställer in minsta och högsta längd i vår lösenordsvalidering, minsta längd är 5 och maximal längd är 8 så att användaren kan ge ett giltigt lösenord mellan 5 och 8 tecken.
Slutligen ställer vi in telefonen och de meddelandefält som krävs och specifikt tillämpar nummervalidering på den arkiverade telefonen.
Kod för formulärvalidering i vinkel JS
index.html
Exempel på vinkelomfång Förnamn
Denna inlämning krävs
konvertera en sträng till datum i javaEfternamn
Denna inlämning krävs
E-post
Denna inlämning krävs
Inte ett giltigt e-postmeddelande
Telefon
Denna inlämning krävs
Det här är inte en giltig telefon
Lösenord
Denna inlämning krävs
Lösenord mellan 5 och 8 tecken
Meddelande
Denna inlämning krävs
Skicka in
app.js
var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', funktion ($ scope) {})Låt oss prata om något valideringsdirektiv som används i formuläret:
- ng-krävs : För att tillhandahålla det obligatoriska fältet
- ng-show : För att visa felmeddelandet baserat på villkoret (kontrollera valideringsegenskaperna)
- av minlängd : För att ge minimilängd
- ng-maxlängd : För att ge maximal längd
- av mönster : För att matcha ett specifikt mönster
- ng-modell : Binder fältet med valideringsegenskaper som $ error, $ valid, etc.
Med detta kommer vi till ett slut på denna Validation in Angular JS-artikel. Jag hoppas att du fick en förståelse för de olika saker som ska beaktas för formvalidering i Angular JS.
Om du vill lära dig mer om Angular framework, kolla in vår som kommer med instruktörsledad live-utbildning och verklig projektupplevelse. Den här utbildningen hjälper dig att förstå djupgående vinkel och hjälper dig att behärska ämnet.
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen i den här artikeln så kommer vi tillbaka till dig.