Et af de vigtigste punkter i webudvikling, og som undertiden negligeres eller ikke er betalt den nødvendige opmærksomhed, er formvalidering og af felterne, der omfatter dem, spænder disse valideringer fra, hvilke værdier de kan acceptere, deres længde til det faktum, om de er nødvendige eller ej.
Disse valideringer af klientsiden tidligere blev de udført af Javascript opbygning af besværlige funktioner til at validere et par felter og opnå resultater, der ikke altid var de mest optimale, blev det også valgt at validere serversiden men dette gav ikke brugeren en venlig oplevelse, da vi først skulle behandle dataene og vente på svar fra serveren for at kontrollere, at alle vores data var korrekte.
Efter en tid med at have arbejdet pænt med Javascript For at udføre alle former for operationer på klientsiden ser det ud til, at rammer gør tingene lettere, blandt dem en af de mest berømte: jQuery; Med en foruddefineret struktur og en renere og mere optimal måde at gøre tingene på, var det muligt at efterlade alle de dårlige fremgangsmåder og give udvikleren et meget mere komplet værktøj til at opnå disse operationer, herunder valideringer.
Men selvom jQuery lettede mange operationer på klientsiden, endnu var der ikke blevet udviklet noget, der direkte ville angribe spørgsmålet om valideringer, derfor er plugin af Bootstrap Validator som bruger alle fordelene ved jQuery og rammen om HTML5 Y CSS3, Bootstrap.
1. Bootstrap Validator
Bootstrap Validator er et plugin, der er baseret på jQuery Y Bootstrap, det giver mulighed for at validere formularer såvel som elementerne i den med en simpel inkludering af plugin -bibliotekerne og brugen af dens kraftfulde, men enkle API, dette uden at glemme alle de egenskaber, det har, lad os se nogle af disse:
- Integration med skrifttyper og stilarter Bootstrap.
- Foruddefinerede feltvalideringer, der inkluderer: indholdslængde, datoer, kreditkort, telefoner, e -mail, blandt andre.
- Tilpassede valideringer til felter.
- Mulighed for at tilføje flere valideringer pr. Felt.
- Mulighed for at vise et feedbackikon i henhold til valideringsresultatet.
- Mulighed for at bruge beskeder i HTML ifølge valideringsresultatet.
Som vi kunne se, gør disse egenskaber det til nummer én mulighed for at overveje ved implementering af valideringer i vores projekter.
Hvad har vi brug for for at bruge det?For at kunne bruge Bootstrap Validator vi skal medtage jQuery helst i sin seneste version, Bootstrap fra din version 3.x og filerne .css Y .js fra boghandlen. Derudover skal vi have en webserverinstallation som Wamp hvis vi arbejder på Windows eller Lampe i Linux.
2. Validatorer
Inden du går ind på den praktiske del af denne vejledning, er det vigtigt at kende nogle af de vigtigste validatorer, som den bruger. Bootstrap Validator til håndtering af valideringer inden for formularerne, lad os se:
base64Validerer en base-64 kodet tegnstreng.
mellemKontroller, om værdien af et felt er strengt mellem to givne tal eller ej.
kreditkortValider et kreditkortnummer.
datoValider en dato i henhold til visse muligheder, blandt hvilke format, en maksimum, minimum dato og endda ved separator skiller sig ud.
cifreReturnerer sandt eller sandt, hvis værdien kun indeholder tal.
Email adresseSom navnet antyder, validerer det en e -mail -adresse.
regexpValiderer, hvis den givne værdi matcher eller svarer til et regulært udtryk for Javascript.
Dette er blot et lille udsnit af det komplette repertoire af validatorer, som vi har i Bootstrap ValidatorFor den komplette liste over validatorer kan vi indtaste her og kontrollere den, der bedst passer til vores behov:
3. Login form
Et af de vigtigste aspekter af ethvert aktuelt websted er login formular, hvor vores brugere kan indtaste med deres brugernavn og adgangskode til vores side og nyde yderligere fordele, når de logger ind.
Bootstrap Validator tillader os også at validere disse to felter med et par enkle kodelinjer Bootstrap giver os mulighed for at give det et ekstra touch ved at tillade os at implementere et modalvindue på en enkel måde og dermed opbygge en loginformular, der vil se professionel og behagelig ud for brugerens øje.
Da vi ikke foretager nogen ændringer af kildekoden for nogen af de førnævnte filer, vil vi inkludere dem fra deres respektive CDN, først vil vi inkludere filerne .css så meget af Boostrap synes godt om Bootstrap Validator:
Nu vil vi inkludere filerne .js og for at få en meget renere struktur, skal vi adskille koden til vores valideringer i en fil kaldet validator.js:
Så vil vi bruge fordelene ved Bootstrap for at bygge vores modalvindue, som bare ved at anvende de nødvendige klasser på de elementer, der sammensætter det, anvendes den ønskede funktionalitet:
Login form×Lad os se, hvordan vores eksempel ser ud indtil videre, når vi kører det i browseren:Log på
BrugernavnAdgangskodeLog på
Vi har allerede vores modalvindue i gang sammen med vores formular, nu skal vi kun inkludere valideringerne med Bootstrap Validator, til dette vil vi initialisere a dokument. klar i vores fil validator.js og inden for dette vil vi kalde metoden boostrapValidator ():
$ ('# loginForm'). bootstrapValidator ({meddelelse: 'Denne værdi er ikke gyldig', feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, felter: {bruger: {validators: {notEmpty: {message: 'Brugernavn er påkrævet'}}}, adgangskode: {validators: {notEmpty: {message: 'Password is required'}}}}}}); Den første ting, vi bør lægge mærke til i denne kode, er brugen af vælgeren til at initialisere metoden, i dette tilfælde bruger vi ID'et for den formular, der kaldes loginForm, dette for at gå igennem DOM træ og komme til emnerne herunder i hierarkiet. Vi definerer derefter en generel besked og feedbackikonerne for at give vores form et visuelt touch i tilfælde af succes eller fejl i valideringerne.
Endelig har vi vores valideringer, og hvordan vi på et øjeblik kan se, at det er noget ekstremt læsbart og af en uovertruffen enkelhed, vi angiver navnet på felterne i vores formularer, og i dette eksempel vil vi bruge en enkelt validering, der vil være den for obligatorisk felt, men som vi kommenterede, kan de være mere end et pr. felt.
Lad os se i følgende billede, hvordan vores formular ser ud, når vi forsøger at sende oplysningerne uden at have udfyldt felterne:
Hvordan vi ser vores valideringer fungere, og indtil der er indtastet oplysninger i felterne, vil formularen ikke udføre Indsend Da knappen er deaktiveret som standard, lad os se på følgende billede, hvordan vores formular ser ud, når vi indtaster de nødvendige data, og feedbackikonerne ændres i overensstemmelse hermed:
På få minutter var vi i stand til at opbygge en loginformular med de respektive valideringer på klientsiden alt takket være Bootstrap Validator.
4. Tilmeldingsblanket
Den tidligere sag er enkel og ganske nyttig, men den er ikke den eneste, der er til stede i udviklingen, der er registreringsformularer, der indeholder mange flere felter, og begrænsningerne vedrørende de oplysninger, der skal indtastes, er forskellige.
Dette har tidligere givet et problem, da der afhængigt af antallet af felter skulle udføres en tæller og valideres felt for felt, og når denne tæller nåede et bestemt antal, betød det, at der ikke var fejl, dette uden at glemme de individuelle valideringer af hvert felt, f.eks. datoformater, som kun accepterer tal eller endda feltets længde.
Med Boostrap Validator og dens foruddefinerede validatorer hjælper os med denne opgave på en enkel og hurtig måde, lad os se:
Først vil vi inkludere filerne .css Y .js som vi brugte i det foregående eksempel, derudover inkluderer vi nogle biblioteker for at kunne bruge datatimepicker af Boostrap:
Når dette er gjort, bygger vi vores formular og giver hvert felt et passende navn:
Lad os se, hvordan denne formular ser ud i vores browser:Tilmeldingsblanket
NavneEfternavneE -mailAdgangskodeFødselsdato*****HanFemininTelefonMobiltelefonCheck ind
Inden vi går videre til valideringerne, er det vigtigt, at vi sætter vores datatimepicker til dette behøver vi kun at inkludere følgende kodelinjer i vores fil validator.js og giv det det id, som vores felt har i formen:
$ (funktion () {$ ('# datetimepicker'). datetimepicker ({pickTime: false});}); Lad os se, hvordan dette plugin ser ud:
Som vi kunne se, har formularen blandede felter, herunder tekst, adgangskodefelter, datatimepicker og endda radioknapper, men dette er ikke et problem for Bootstrap Validator, vil vi bruge vores samme fil validator.js for valideringer skal vi bare udføre en ny forekomst af metoden boostrapValidator med id'et for den nye formular, og der inkluderer det samme:
$ ('# registrationForm'). bootstrapValidator ({feedbackIcons: {valid: 'glyphicon glyphicon-ok', ugyldig: 'glyphicon glyphicon-remove', validering: 'glyphicon glyphicon-refresh'}, felter: {navn: {validators: {notEmpty: {meddelelse: 'Fornavn er påkrævet'}}}, efternavn: {validators: {notEmpty: {message: 'Efternavn er påkrævet'}}}, e -mail: {validators: {notEmpty: {message: ' E -mailen er påkrævet og må ikke være tom '}, emailAddress: {meddelelse:' E -mailen er ikke gyldig '}}}, adgangskode: {validators: {notEmpty: {meddelelse:' Adgangskoden er påkrævet og må ikke være tom '}, stringLength: {min: 8, meddelelse: 'Adgangskoden skal indeholde mindst 8 tegn'}}}, datetimepicker: {validators: {notEmpty: {meddelelse: 'Fødselsdatoen er påkrævet og må ikke være tom'}, dato: {format: 'ÅÅÅÅ-MM-DD', besked: 'Fødselsdatoen er ikke gyldig'}}}, *****: {validators: {notEmpty: {message: 'The *****is required '}}}, telefon: {meddelelse:' Telefonen eller er ikke gyldig ', validatorer: {notEmpty: {meddelelse:' Telefonen er påkrævet og må ikke være tom '}, regexp: {regexp: / [0-9] + $ /, meddelelse:' Telefonen kan kun indeholde numre '}}}, telefono_cel: {meddelelse:' Telefonen er ikke gyldig ', validatorer: {regexp: {regexp: / [0-9] + $ /, meddelelse:' Telefonen kan kun indeholde tal '} }},}}); Vi kan se, at de første to valideringer ligner det foregående eksempel, men når vi finder e -mail -feltet, ser vi, at det har valideringen af det nødvendige felt og derudover med validatoren Email adresse Vi bekræfter, at det er en gyldig e -mail, lad os se, hvordan denne validering opfører sig:
Med datapicker Vi har ingen problemer med at indtaste datoer, men hvis vi ønsker at modtage dette på den reneste måde, kan vi validere formatet, som vi kan se i den følgende validering, hvor vi angiver, at formatet skal være ÅÅÅÅ-MM-DD hvad er gældende for:
Vi kan endda validere, hvor mange tegn adgangskoden kan være med stringLængde og muligheden for min:
For at afslutte og demonstrere kraften i dette plugin skal vi validere telefonen, vi kunne bruge ciffervalideren, men i dette tilfælde vil vi bruge noget mere komplekst som et regulært udtryk, og det bedste af alt er, at vi allerede har en validator til at: den regexp, Lad os se, hvordan det fungerer i vores form:
Efter allerede at have testet, at alle vores valideringer fungerer korrekt, vil vi rette alle oplysninger i vores formular og se, hvordan det ser ud med de relevante oplysninger:
Med dette afslutter vi denne vejledning, hvor vi lærte at bruge valideringerne af Boostrap Validator, et kraftfuldt plugin, der ikke kræver installation eller konfiguration, og som giver os mulighed for hurtigt og let at validere vores formularer med et par enkle kodelinjer.
