Validering är processen som säkerställer att data är korrekta och fullständiga.
I ett verkligt exempel, låt oss anta en webbplats som kräver att ett registreringsformulär ska fyllas i innan du får full tillgång till den här webbplatsen. Registreringssidan skulle ha inmatningsfält för användarnamn, lösenord, e-post-ID och så vidare.
När användaren skickar in formuläret skulle en validering normalt ske först innan informationen skickas till servern. Denna validering skulle försöka säkerställa i bästa möjliga utsträckning att detaljerna för inmatningsfälten matas in på rätt sätt.
Till exempel måste e-post-ID alltid ha formatet Den här e-postadressen är skyddad från spamrobotar. Du måste ha Javascript aktiverat för att kunna se det. ; om någon bara anger användarnamnet i e-post-id: t bör valideringen helst misslyckas. Så validering tittar på att göra dessa grundläggande kontroller innan detaljerna skickas till servern för vidare bearbetning.
I den här handledningen lär du dig-
- Formvalidering med HTML5
- Formvalidering med $ smutsig, $ giltig, $ ogiltig, $ orörd
- Formvalidering med AngularJS Auto Validate
- Användarfeedback med Ladda-knappar
Formvalidering med HTML5
Formvalidering är processen att förvalidera information som matas in på ett webbformulär av användaren innan den skickas till servern. Det är alltid bättre att validera informationen på själva klientsidan. Detta beror på att det lägger till mindre omkostnader om användaren måste presenteras med formuläret igen om den angivna informationen var fel.
Låt oss ta en titt på hur formulärvalidering kan utföras i HTML5.
I vårt exempel visar vi ett enkelt registreringsformulär för användaren där användaren behöver ange information som användarnamn, lösenord, e-post-ID och ålder.
Formuläret har valideringskontroller för att säkerställa att användaren matar in informationen på ett korrekt sätt.
Event Registration Guru99 Global Event
Kodförklaring:
- För typ av textinmatning använder vi attributet "obligatorisk". Detta innebär att textrutan inte kan vara tom när formuläret skickas, och att någon form av text bör finnas i textrutan.
- Nästa inmatningstyp är lösenord. Eftersom ingångstypen är markerad som lösenord kommer den att maskeras när användaren skriver in någon text i fältet.
- Eftersom inmatningstypen anges som e-post måste texten i rutan matcha mönstret. Den här e-postadressen är skyddad från spamrobotar. Du måste ha Javascript aktiverat för att kunna se det. .
- När inmatningstypen är markerad som ett nummer, om en användare försöker skriva in något tecken med tangentbordet eller alfabetet, kommer det inte att matas in i textrutan.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
För att se formulärvalideringen i aktion klickar du på knappen Skicka utan att ange någon information på skärmen.
När du har klickat på knappen Skicka visas en popup som visar ett valideringsfel som fältet måste fyllas i.
Så valideringen för kontrollen som var markerad som krävs gör att felmeddelandet visas om användaren inte anger något värde i textfältet.
När användaren anger något värde i lösenordskontrollen kommer du att märka '*' - symbolen som används för att maskera de tecken som anges.
Låt oss sedan ange fel e-post-ID och klicka på knappen Skicka. När du har klickat på knappen Skicka visas en popup som visar ett valideringsfel som fältet behöver ha @ -symbolen.
Så valideringen för kontrollen som markerades som en e-postkontroll kommer att leda till att felmeddelandet visas om användaren inte anger ett korrekt e-post-id i textfältet.
Slutligen, när du försöker skriva in tecken i ålderstextkontrollen, kommer det inte att skrivas in på skärmen. Kontrollen fylls bara med ett värde när ett nummer anges i kontrollen.
Formvalidering med $ smutsig, $ giltig, $ ogiltig, $ orörd
AngularJS tillhandahåller dess ytterligare egenskaper för validering. AngularJS tillhandahåller följande egenskaper för kontroller för valideringsändamål
- $ smutsig - Användaren har interagerat med kontrollen
- $ valid - Fältinnehållet är giltigt
- $ ogiltigt - Fältinnehållet är ogiltigt
- $ pristine - Användaren har inte interagerat med kontrollen ännu
Nedan följer stegen som måste följas för att utföra vinkelvalidering.
Steg 1) Använd egenskapen no validate när du förklarar formuläret. Den här egenskapen säger till HTML5 att valideringen skulle göras av AngularJS.
Steg 2) Se till att formuläret har ett namn definierat för det. Anledningen till att göra detta är att formulärnamnet kommer att användas när du utför vinkelvalidering.
Steg 3) Se till att varje kontroll också har ett namn definierat för det. Anledningen till detta är att kontrollnamnet kommer att användas när du utför vinkelvalidering.
Steg 4) Använd ng-show-direktivet för att kontrollera om $ smutsiga, $ ogiltiga och $ giltiga egenskaper för kontrollerna.
Låt oss titta på ett exempel som innehåller de ovan nämnda stegen.
I vårt exempel,
Vi kommer bara att ha ett enkelt textfält där användaren måste ange ett ämnesnamn i textrutan. Om detta inte görs utlöses ett valideringsfel och felmeddelandet visas för användaren.
Event Registration Guru99 Global Event
Kodförklaring:
- Observera att vi har gett ett namn för formuläret som är "myForm". Detta krävs vid åtkomst till kontrollerna på formuläret för AngularJS-validering.
- Använda egenskapen "novalidate" för att säkerställa att HTML-formuläret gör det möjligt för AngularJS att utföra valideringen.
- Vi använder ng-show-direktivet för att söka efter egenskapen "$ smutsiga" och "$ ogiltiga". Det betyder att om textrutan har modifierats kommer egenskapsvärdet "$ smutsigt" att vara sant. I fallet där textrutans värde är noll blir egenskapen "$ ogiltig" sann. Så om båda egenskaperna är sanna kommer valideringen att misslyckas för kontrollen. Följaktligen, om båda värdena är sanna, kommer ng-showen också att bli sant, och span-kontrollen med de röda färgtecknen kommer att visas.
- I detta kontrollerar vi egenskapen "$ error" som också utvärderas till sant eftersom vi för kontrollen har nämnt att värdet ska anges för kontrollen. I sådana fall, där det inte finns några uppgifter i textrutan, visar span-kontrollen texten "Användarnamn krävs".
- Om textrutans kontrollvärde är ogiltigt vill vi också inaktivera skicka-knappen så att användaren inte kan skicka formuläret. Vi använder egenskapen "ng-deaktiverad" för kontrollen för att göra detta baserat på det villkorliga värdet för kontrollens "$ smutsiga" och "$ ogiltiga" egenskap.
- I styrenheten ställer vi bara in startvärdet för textrutans värde till texten "AngularJS". Detta görs bara för att ställa in något standardvärde i textrutan när formuläret först visas. Det visar bättre hur valideringen sker för textrutan.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
När formuläret först visas visar textrutan värdet på "AngularJS" och "Skicka-knappen" är aktiverad. Så snart du tar bort texten från kontrollen är valideringsfelmeddelandet aktiverat och knappen Skicka inaktiveras.
Ovanstående skärmdump visar två saker
- Skicka-knappen är inaktiverad
- Det finns inget ämnesnamn i ämnestextrutan. Därför avfyras felmeddelandet "Användarnamn krävs."
Formvalidering med AngularJS Auto Validate
Det finns en möjlighet i AngularJS att ha validerat alla kontroller i ett formulär automatiskt utan att behöva skriva anpassad kod för valideringen. Detta kan göras genom att inkludera en anpassad modul som heter "jcs-AutoValidate."
Med den här modulen på plats behöver du inte placera någon speciell kod för att utföra valideringen eller visa felmeddelandena. Allt detta hanteras av koden inuti JCS-AutoValidate.
Låt oss titta på ett enkelt exempel på hur man uppnår detta.
I detta exempel,
Vi kommer bara att ha en enkel form med en textrutekontroll som är ett obligatoriskt fält. Ett felmeddelande bör visas om denna kontroll inte är ifylld.
Event Registration Guru99 Event
Kodförklaring:
- Först måste vi inkludera skriptet "jcs-auto-validate.js" som har alla funktionerna för automatisk validering.
- Vi måste se till att varje element inklusive "div-taggen" placeras i en "form-group" -klass.
- Behöver också se till att varje element (som är ett HTML-element som ingångskontroll, spankontroll, div-kontroll och så vidare) såsom ingångskontroller också placeras i formgruppsklassen.
- Inkludera jcs-autovalidate i din AngularJS JS-modul.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Som standard när du kör din kod visas ovanstående formulär enligt HTML-koden.
Om du försöker skicka formuläret kommer felmeddelandet att dyka upp och säga "Detta fält är obligatoriskt." Allt detta görs med JCS-AutoValidate-alternativet.
Användaråterkopplingar med Ladda-knappar
"Ladda" -knapparna är ett speciellt ramverk som är byggt för knappar ovanpå JavaScript för att ge knapparna en visuell effekt när de trycks in.
Så om en knapp ges attributet "ladda" och trycks ned visas en snurreffekt. Det finns också olika datastilar tillgängliga för knappen för att ge ytterligare visuella effekter.
Låt oss titta på ett exempel på hur man ser "ladda" -knappar i aktion. Vi kommer bara att se ett enkelt formulär som har en skicka-knapp. När du trycker på knappen visas en centrifugeringseffekt på knappen.
Event Registration Guru99 Event
Kodförklaring:
- Vi använder "ng-submit" -direktivet för att kalla en funktion som heter "submit". Denna funktion kommer att användas för att ändra ladda-attributet för skicka-knappen.
- Ladda-attributet är ett speciellt attribut för ladda-ramverket. Det är detta attribut som ger spin-effekten till kontrollen. Vi ställer in värdet på attributet ladda till den variabel som skickas.
- Datastilegenskapen är återigen ett extra attribut som erbjuds av ladda-ramverket, vilket bara lägger till en annan visuell effekt på skicka-knappen.
- Modulen 'AngularJS-ladda' måste läggas till i AngularJS.JS-applikationen för att ladda-ramverket ska fungera.
- Inledningsvis definierar vi och ställer in värdet på en variabel som kallas 'skicka' till falskt. Detta värde ställs in för ladda-attributet för skicka-knappen. Genom att initialt ställa in detta till falskt säger vi att vi inte vill att inlämningsknappen ska ha ladda-effekten ännu.
- Vi förklarar en funktion som anropas när du skickar in knappen Skicka. I den här funktionen ställer vi in 'skicka' till sant. Detta kommer att leda till att ladda-effekten tillämpas på knappen Skicka.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
När formuläret först visas visas knappen Skicka i sin enkla form.
När du skickar in knappen Skicka sänds variabeln i styrenheten till sann. Detta värde skickas till attributet "ladda" för inlämningsknappen som orsakar knappens snurrande effekt.
Sammanfattning
- Validering för textrutans HTML-kontroller kan göras med attributet "krävs".
- I HTML5 har nya kontroller lagts till som lösenord, e-post och nummer som ger sin egen uppsättning valideringar.
- Formvalidering i AngularJS tas hand om genom att titta på $ smutsiga, $ giltiga, $ ogiltiga och $ orörda värden för en formulärkontroll.
- Automatisk validering i AngularJS-applikationer kan också uppnås med hjälp av JCS-auto-valideringsmodulen.
- Ladda-knappar kan läggas till i ett Angular.js-program för att ge användaren lite förbättrad visuell känsla när man trycker på knappen.