En av de viktigaste punkterna i webbutveckling och som ibland försummas eller inte uppmärksammas är den formvalidering och av fälten som omfattar dem, sträcker sig dessa valideringar från vilka värden de kan acceptera, deras längd till det faktum om de är nödvändiga eller inte.
Dessa valideringar av klientsidan tidigare utfördes de av Javascript bygga besvärliga funktioner för att validera några få fält och få resultat som inte alltid var de mest optimala, valdes det också att validera serversidan men detta gav inte användaren en vänlig upplevelse eftersom vi först måste bearbeta data och vänta på svar från servern för att verifiera att alla våra data var korrekta.
Efter en tid av att ha arbetat med snyggt Javascript För att utföra alla typer av operationer på klientsidan verkar ramverk göra det enklare, bland dem en av de mest kända: jQuery; Med en fördefinierad struktur och ett renare och mer optimalt sätt att göra saker var det möjligt att lämna efter sig alla dåliga metoder och ge utvecklaren ett mycket mer komplett verktyg för att uppnå dessa operationer, inklusive valideringar.
Men fastän jQuery underlättade många operationer på klientsidan, något hade ännu inte utvecklats som direkt skulle attackera frågan om valideringar, det är därför plugin av Bootstrap Validator som använder alla fördelarna med jQuery och ramen för HTML5 Y CSS3, Bootstrap.
1. Bootstrap Validator
Bootstrap Validator är ett plugin som är baserat på jQuery Y Bootstrap, det gör det möjligt att validera formulär, liksom elementen i det med en enkel inkludering av pluginbiblioteken och användningen av dess kraftfulla men enkla API, detta utan att glömma alla egenskaper som det har, låt oss se några av dessa:
- Integration med teckensnitt och stilar Bootstrap.
- Fördefinierade fältvalideringar som inkluderar: innehållslängd, datum, kreditkort, telefoner, e -post, bland annat.
- Anpassade valideringar för fält.
- Möjlighet att lägga till flera valideringar per fält.
- Möjlighet att visa en feedbackikon enligt valideringsresultatet.
- Möjlighet att använda meddelanden i HTML enligt valideringsresultatet.
Som vi kunde se, gör dessa egenskaper det till det främsta alternativet att överväga för implementering av valideringar i våra projekt.
Vad behöver vi för att använda den?För att kunna använda Bootstrap Validator vi måste inkludera jQuery helst i sin senaste version, Bootstrap från din version 3.x och filerna .css Y .js från bokhandeln. Dessutom måste vi ha en webbserverinstallation som Wamp om vi jobbar på Windows eller Lampa i Linux.
2. Validerare
Innan du går in på den praktiska delen av denna handledning är det viktigt att känna till några av de viktigaste validatorerna som den använder. Bootstrap Validator Låt oss se för hantering av valideringar i formulärerna:
bas64Validerar en bas-64 kodad teckensträng.
mellanKontrollera om värdet på ett fält är strikt mellan två givna nummer eller inte.
kreditkortVerifiera ett kreditkortsnummer.
datumValidera ett datum enligt vissa alternativ bland vilka formatet, ett högsta, lägsta datum och till och med avskiljare sticker ut.
siffrorReturnerar sant eller sant om värdet endast innehåller siffror.
e-postadressSom namnet antyder validerar den en e -postadress.
regexpValiderar om det givna värdet matchar eller motsvarar ett vanligt uttryck för Javascript.
Detta är bara ett litet urval av hela repertoaren av validatorer som vi har Bootstrap ValidatorFör den fullständiga listan över validatorer kan vi gå in här och kontrollera den som bäst passar våra behov:
3. Inloggningsformulär
En av de viktigaste aspekterna på en aktuell webbplats är Inloggningsformulär, där våra användare kan ange med sitt användarnamn och lösenord till vår sida och njuta av ytterligare fördelar när de loggar in.
Bootstrap Validator tillåter oss att validera dessa två fält med några enkla kodrader, dessutom Bootstrap tillåter oss att ge den en extra touch genom att tillåta oss att implementera ett modalfönster på ett enkelt sätt, och på så sätt bygga ett inloggningsformulär som kommer att se professionellt och trevligt ut för användarens öga.
Eftersom vi inte kommer att göra några ändringar av källkoden för någon av de ovannämnda filerna kommer vi att inkludera dem från deras respektive CDN, först kommer vi att inkludera filerna .css så mycket av Boostrap tycka om Bootstrap Validator:
Nu kommer vi att inkludera filerna .js och för att få en mycket renare struktur kommer vi att separera koden för våra valideringar i en fil som heter validator.js:
Då kommer vi att använda fördelarna med Bootstrap för att bygga vårt modalfönster, som bara genom att tillämpa de nödvändiga klasserna på elementen som komponerar det, tillämpas den önskade funktionaliteten:
Inloggningsformulär×Låt oss se hur vårt exempel ser ut så långt när vi kör det i webbläsaren:Logga in
AnvändarnamnLösenordLogga in
Vi har redan vårt modalfönster som fungerar, tillsammans med vårt formulär, nu behöver vi bara inkludera valideringarna med Bootstrap Validator, för detta kommer vi att initiera a dokument. redo i vår fil validator.js och inom detta kommer vi att kalla metoden boostrapValidator ():
$ ('# loginForm'). bootstrapValidator ({meddelande: 'Det här värdet är inte giltigt', feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fält: {användare: {validatorer: {notEmpty: {meddelande: 'Användarnamn krävs'}}}, lösenord: {validators: {notEmpty: {meddelande: 'Lösenord krävs'}}}}}}); Det första vi bör lägga märke till i den här koden är användningen av väljaren för att initiera metoden, i det här fallet använder vi ID för formuläret som kallas Inloggningsformulär, detta för att gå igenom DOM -träd och komma till objekten nedanför den i hierarkin. Vi definierar sedan ett generellt meddelande och återkopplingsikonerna för att ge en visuell touch till vårt formulär vid framgång eller fel i valideringarna.
Slutligen har vi våra valideringar och hur vi på ett ögonblick kan se att det är något extremt läsvärt och av en oöverträffad enkelhet, vi anger namnet på fälten i våra former och i detta exempel kommer vi att använda en enda validering som kommer att vara den för obligatoriskt fält, men som vi kommenterade kan de vara mer än ett per fält.
Låt oss se i följande bild hur vårt formulär ser ut när vi försöker skicka informationen utan att ha fyllt i fälten:
Hur vi ser att våra valideringar fungerar och tills information anges i fälten kommer formuläret inte att utföra Skicka in Eftersom knappen är inaktiverad som standard, låt oss se i följande bild hur vårt formulär ser ut när vi anger nödvändiga data och feedbackikonerna ändras i enlighet därmed:
På några minuter kunde vi bygga ett inloggningsformulär med sina respektive valideringar på klientsidan allt tack vare Bootstrap Validator.
4. Anmälningsblankett
Det tidigare fallet är enkelt och ganska användbart men det är inte det enda som finns i utvecklingen, det finns registreringsformulär som innehåller många fler fält och restriktionerna för informationen som ska skrivas in är olika.
Detta utgjorde tidigare ett problem eftersom beroende på antalet fält måste en räknare utföras och valideras fält för fält och när denna räknare nådde ett visst antal innebar det att det inte fanns några fel, detta utan att glömma de individuella valideringarna av varje fält, till exempel datumformat, som endast accepterar siffror eller till och med längden på fältet.
Med Boostrap Validator och dess fördefinierade validatorer hjälper oss i denna uppgif.webpt på ett enkelt och snabbt sätt, låt oss se:
Först kommer vi att inkludera filerna .css Y .js som vi använde i föregående exempel, dessutom kommer vi att inkludera några bibliotek för att kunna använda datatimepicker av Boostrap:
När detta är gjort bygger vi vårt formulär och ger varje fält ett lämpligt namn:
Låt oss se hur det här formuläret ser ut i vår webbläsare:Anmälningsblankett
NamnEfternamnE-postLösenordFödelsedatum*****ManligFemininTelefonMobiltelefonChecka in
Innan vi går vidare till valideringarna är det viktigt att vi lägger vår datatimepicker för detta behöver vi bara inkludera följande kodrader i vår fil validator.js och ge det ID som vårt fält har i formen:
$ (function () {$ ('# datetimepicker'). datetimepicker ({pickTime: false});}); Låt oss se hur detta plugin ser ut:
Som vi kunde se har formuläret blandade fält, inklusive text, lösenordsfält, datatimepicker och till och med alternativknappar, men detta är inte ett problem för Bootstrap Validator, kommer vi att använda vår samma fil validator.js för valideringar måste vi bara utföra en ny instans av metoden boostrapValidator med ID för det nya formuläret och det innehåller samma:
$ ('# registrationForm'). bootstrapValidator ({feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh'}, fält: {name: {validators: {notEmpty: {meddelande: 'Förnamn krävs'}}}, efternamn: {validators: {notEmpty: {meddelande: 'Efternamn krävs'}}}, e -post: {validators: {notEmpty: {message: ' E -postadressen är obligatorisk och kan inte vara tom '}, emailAddress: {meddelande:' E -postmeddelandet är inte giltigt '}}}, lösenord: {validators: {notEmpty: {meddelande:' Lösenordet krävs och kan inte vara tomt '}, stringLength: {min: 8, meddelande: 'Lösenordet måste innehålla minst 8 tecken'}}}, datetimepicker: {validators: {notEmpty: {meddelande: 'Födelsedatum krävs och får inte vara tomt'}, datum: {format: 'ÅÅÅÅ-MM-DD', meddelande: 'Födelsedatumet är inte giltigt'}}}, *****: {validators: {notEmpty: {message: 'The *****is required '}}}, telefon: {meddelande:' Telefonen eller är inte giltig ', validatorer: {notEmpty: {meddelande:' Telefonen krävs och kan inte vara tom '}, regexp: {regexp: / [0-9] + $ /, meddelande:' Telefonen kan bara innehåller nummer '}}}, telefono_cel: {meddelande:' Telefonen är ogiltig ', validatorer: {regexp: {regexp: / [0-9] + $ /, meddelande:' Telefonen kan endast innehålla nummer '} }},}}); Vi kan se att de två första valideringarna liknar det föregående exemplet, men när vi hittar e -postfältet ser vi att det har valideringen av det obligatoriska fältet och dessutom med valideraren e-postadress Vi verifierar att det är ett giltigt e -postmeddelande, låt oss se hur denna validering beter sig:
Med Datumväljare Vi har inga problem med att ange datum, men om vi vill ta emot detta på det renaste sättet vi kan validera formatet som vi kan se i följande validering där vi anger att formatet ska vara ÅÅÅÅ-MM-DD vad gäller för:
Vi kan till och med validera hur många tecken lösenordet kan innehålla stränglängd och alternativet min:
För att avsluta och visa kraften i detta plugin kommer vi att validera telefonen, vi kan använda siffervalideraren men i det här fallet kommer vi att använda något mer komplext som ett reguljärt uttryck och det bästa av allt är att vi redan har en validator för Att den regexp, Låt oss se hur det fungerar i vår form:
Efter att redan ha testat att alla våra valideringar fungerar korrekt kommer vi att korrigera all information i vårt formulär och se hur det ser ut med lämplig information:
Med detta avslutar vi denna handledning, där vi lärde oss att använda valideringarna av Boostrap Validator, ett kraftfullt plugin som inte behöver installeras eller konfigureras och som gör att vi snabbt och enkelt kan validera våra formulär med några enkla kodrader.
