Et av de viktigste punktene i webutvikling, og som noen ganger blir neglisjert eller ikke betalt nødvendig oppmerksomhet, er skjema validering og av feltene som omfatter dem, varierer disse valideringene fra hvilke verdier de kan godta, deres lengde til det faktum om de er nødvendige eller ikke.
Disse valideringene av klient side tidligere ble de utført av Javascript bygge tunge funksjoner for å validere noen få felt og oppnå resultater som ikke alltid var de mest optimale, ble det også valgt å validere serversiden men dette ga ikke brukeren en vennlig opplevelse siden vi først måtte behandle dataene og vente på svar fra serveren for å bekrefte at alle dataene våre var riktige.
Etter en tid med å ha jobbet pent med Javascript For å utføre alle slags operasjoner på klientsiden ser det ut til at rammer gjør ting enklere, blant dem en av de mest kjente: jQuery; Med en forhåndsdefinert struktur og en renere og mer optimal måte å gjøre ting på, var det mulig å legge igjen alle de dårlige rutinene og gi utvikleren et mye mer komplett verktøy for å oppnå disse operasjonene, inkludert valideringer.
Men selv om jQuery tilrettelagt mange operasjoner på klientsiden, noe som ennå ikke var utviklet som direkte ville angripe spørsmålet om valideringer, det er derfor pluginet til Bootstrap Validator som bruker alle fordelene med jQuery og rammen av HTML5 Y CSS3, Støvelhempe.
1. Bootstrap Validator
Bootstrap Validator er en plugin som er basert på jQuery Y Støvelhempe, det gjør det mulig å validere skjemaer, så vel som elementene i det, med en enkel inkludering av plugin -bibliotekene og bruk av dets kraftige, men enkle API, dette uten å glemme alle egenskapene det har, la oss se noen av disse:
- Integrasjon med fonter og stiler Støvelhempe.
- Forhåndsdefinerte feltvalideringer som inkluderer: innholdslengde, datoer, kredittkort, telefoner, e -post, blant andre.
- Tilpassede valideringer for felt.
- Mulighet for å legge til flere valideringer per felt.
- Mulighet for å vise et tilbakemeldingsikon i henhold til valideringsresultatet.
- Mulighet for å bruke meldinger i HTML i henhold til valideringsresultatet.
Som vi kunne se, gjør disse egenskapene det til det første alternativet å vurdere for implementering av valideringer i våre prosjekter.
Hva trenger vi for å bruke det?For å kunne bruke Bootstrap Validator vi må inkludere jQuery helst i sin siste versjon, Støvelhempe fra din versjon 3.x og filene .css Y .js fra bokhandelen. I tillegg må vi ha en webserverinstallasjon som Wamp hvis vi jobber med Windows eller Lampe i Linux.
2. Validatorer
Før du går inn på den praktiske delen av denne opplæringen, er det viktig å kjenne noen av de viktigste validatorene den bruker. Bootstrap Validator La oss se for håndtering av valideringer i skjemaene:
base64Validerer en base-64 kodet tegnstreng.
mellomSjekk om verdien til et felt er strengt mellom to gitte tall eller ikke.
kredittkortValider et kredittkortnummer.
DatoValider en dato i henhold til visse alternativer, blant hvilke formatet, en maksimums-, minimumsdato og til og med av separator skiller seg ut.
sifreReturnerer true eller true hvis verdien bare inneholder tall.
epost adresseSom navnet tilsier, validerer den en e -postadresse.
regexpValiderer om den gitte verdien samsvarer med eller tilsvarer et vanlig uttrykk for Javascript.
Dette er bare et lite utvalg av hele repertoaret av validatorer som vi har i Bootstrap ValidatorFor den komplette listen over validatorer, kan vi gå inn her og sjekke den som passer best til våre behov:
3. Innloggingsskjema
En av de viktigste aspektene ved et nåværende nettsted er innloggingsskjema, der brukerne våre kan gå inn med brukernavnet og passordet til siden vår og nyte flere fordeler når de logger på.
Bootstrap Validator lar oss i tillegg validere disse to feltene med noen få enkle kodelinjer Støvelhempe lar oss gi den en ekstra touch ved å la oss implementere et modalvindu på en enkel måte, og dermed bygge et påloggingsskjema som vil se profesjonelt og hyggelig ut for brukerens øye.
Siden vi ikke vil gjøre noen endringer i kildekoden til noen av de nevnte filene, vil vi inkludere dem fra deres respektive CDN, først vil vi inkludere filene .css så mye av Boostrap som Bootstrap Validator:
Nå vil vi inkludere filene .js og for å få en mye renere struktur, skal vi skille koden til valideringene våre i en fil som heter validator.js:
Da vil vi bruke fordelene av Støvelhempe for å bygge vårt modalvindu, som bare ved å bruke de nødvendige klassene på elementene som komponerer det, brukes den ønskede funksjonaliteten:
innloggingsskjema×La oss se hvordan vårt eksempel ser ut så langt når vi kjører det i nettleseren:Logg Inn
BrukernavnPassordLogg Inn
Vi har allerede vårt modalvindu som fungerer, sammen med skjemaet vårt, nå trenger vi bare å inkludere valideringene med Bootstrap Validator, for dette skal vi initialisere a dokument. klar i filen vår validator.js og innenfor dette vil vi kalle metoden boostrapValidator ():
$ ('# loginForm'). bootstrapValidator ({melding: 'Denne verdien er ikke gyldig', feedbackIcons: {valid: 'glyphicon glyphicon-ok', ugyldig: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, felter: {bruker: {validators: {notEmpty: {melding: 'Brukernavn kreves'}}}, passord: {validators: {notEmpty: {melding: 'Password is required'}}}}});Det første vi bør legge merke til i denne koden er bruken av velgeren for å initialisere metoden, i dette tilfellet bruker vi ID -en til skjemaet som kalles innloggingsskjema, dette for å gå gjennom DOM -tre og komme til elementene under det i hierarkiet. Vi definerer deretter en generell melding og tilbakemeldingsikonene, for å gi skjemaet et visuelt preg ved suksess eller feil i valideringene.
Til slutt har vi våre valideringer og hvordan vi kan se på et øyeblikk at det er noe ekstremt lesbart og av en enkelhet uten sidestykke, vi angir navnet på feltene i skjemaene våre, og i dette eksemplet vil vi bruke en enkelt validering som vil være den for obligatorisk felt, men som vi kommenterte kan de være mer enn ett per felt.
La oss se på bildet nedenfor hvordan skjemaet vårt ser ut når vi prøver å sende informasjonen uten å ha fylt ut feltene:
Hvordan vi ser at valideringene våre fungerer, og til informasjon er angitt i feltene, vil ikke skjemaet utføre sende inn Siden knappen er deaktivert som standard, la oss se på bildet nedenfor hvordan skjemaet vårt ser ut når vi legger inn de nødvendige dataene og tilbakemeldingsikonene endres deretter:
På noen få minutter kunne vi bygge et påloggingsskjema med sine respektive valideringer på klientsiden alt takket være Bootstrap Validator.
4. Registreringsskjema
Den forrige saken er enkel og ganske nyttig, men den er ikke den eneste som er tilstede i utviklingen, det er registreringsskjemaer som inneholder mange flere felt, og begrensningene for informasjonen som skal legges inn er forskjellige.
Dette tidligere ga et problem siden avhengig av antall felt, måtte en teller utføres og valideres felt for felt, og når denne telleren nådde et visst antall, betydde det at det ikke var noen feil, dette uten å glemme de individuelle valideringene av hvert felt, for eksempel datoformater, som bare godtar tall eller til og med lengden på feltet.
Med Boostrap Validator og dens forhåndsdefinerte validatorer hjelper oss med denne oppgaven på en enkel og rask måte, la oss se:
Først vil vi inkludere filene .css Y .js som vi brukte i forrige eksempel. I tillegg vil vi inkludere noen biblioteker for å kunne bruke datatimepicker av Boostrap:
Når dette er gjort, bygger vi skjemaet vårt og gir hvert felt et passende navn:
La oss se hvordan dette skjemaet ser ut i nettleseren vår:Registreringsskjema
NavnEtternavnE -postPassordFødselsdato*****HannFemininTelefonMobiltelefonSjekk inn
Før vi går videre til valideringene er det viktig at vi legger vår datatimepicker for dette trenger vi bare å inkludere følgende kodelinjer i filen vår validator.js og gi den IDen som feltet vårt har i skjemaet:
$ (function () {$ ('# datetimepicker'). datetimepicker ({pickTime: false});});La oss se hvordan denne pluginen ser ut:
Som vi kunne se, har skjemaet blandede felt, inkludert tekst, passordfelt, datatimepicker og til og med radioknapper, men dette er ikke et problem for Bootstrap Validator, vil vi bruke den samme filen validator.js for valideringer må vi bare utføre en ny forekomst av metoden boostrapValidator med ID for det nye skjemaet, og det inneholder det samme:
$ ('# registrationForm'). bootstrapValidator ({feedbackIcons: {valid: 'glyphicon glyphicon-ok', ugyldig: 'glyphicon glyphicon-remove', validering: 'glyphicon glyphicon-refresh'}, felt: {navn: {validators: {notEmpty: {melding: 'Fornavn er påkrevd'}}}, etternavn: {validators: {notEmpty: {message: 'Last name is required'}}}, e -post: {validators: {notEmpty: {message: ' E -posten er påkrevd og kan ikke være tom '}, emailAddress: {melding:' E -postadressen er ikke gyldig '}}}, passord: {validators: {notEmpty: {melding:' Passordet er nødvendig og kan ikke være tomt '}, stringLength: {min: 8, melding: 'Passordet må inneholde minst 8 tegn'}}}, datetimepicker: {validators: {notEmpty: {melding: 'Fødselsdatoen er obligatorisk og kan ikke være tom'}, dato: {format: 'ÅÅÅÅ-MM-DD', melding: 'Fødselsdatoen er ikke gyldig'}}}, *****: {validators: {notEmpty: {message: 'The *****is required '}}}, telefon: {melding:' Telefonen eller er ikke gyldig ', validatorer: {notEmpty: {melding:' Telefonen er obligatorisk og kan ikke være tom '}, regexp: {regexp: / [0-9] + $ /, melding:' Telefonen kan bare inneholde tall '}}}, telefono_cel: {melding:' Telefonen er ikke gyldig ', validatorer: {regexp: {regexp: / [0-9] + $ /, melding:' Telefonen kan bare inneholde tall '} }},}});Vi kan se at de for de to første valideringene ligner på det forrige eksemplet, men når vi finner e -postfeltet, ser vi at det har validering av det nødvendige feltet og i tillegg med validatoren epost adresse Vi bekrefter at det er en gyldig e -post. La oss se hvordan denne valideringen oppfører seg:
Med Datovelger Vi har ingen problemer med å angi datoer, men hvis vi ønsker å motta dette på en så ren måte som mulig, kan vi validere formatet slik vi kan se i følgende validering hvor vi angir at formatet skal være ÅÅÅÅ-MM-DD hva gjelder for:
Vi kan til og med validere hvor mange tegn passordet kan inneholde stringLength og muligheten til min:
For å fullføre og demonstrere kraften i denne pluginen skal vi validere telefonen, vi kan bruke siffervalidereren, men i dette tilfellet vil vi bruke noe mer komplekst som et vanlig uttrykk, og det beste av alt er at vi allerede har en validator for at regexp, La oss se hvordan det fungerer i vår form:
Etter å allerede ha testet at alle valideringene våre fungerer riktig, kommer vi til å korrigere all informasjonen i skjemaet vårt og se hvordan det ser ut med riktig informasjon:
Med dette fullfører vi denne opplæringen, der vi lærte å bruke valideringene av Boostrap Validator, en kraftig plugin som ikke trenger installasjon eller konfigurasjon, og som lar oss validere skjemaene våre raskt og enkelt med noen få enkle kodelinjer.