Jedna od najvažnijih točaka u razvoju weba koja se ponekad zanemaruje ili joj se ne posvećuje potrebna pozornost jest validacija obrasca a polja koja ih obuhvaćaju, ove se provjere kreću od onih vrijednosti koje mogu prihvatiti, njihove duljine do činjenice jesu li potrebne ili nisu.
Ove potvrde strana klijenta u prošlosti su ih provodili Javascript izgradnjom glomaznih funkcija za provjeru valjanosti nekoliko polja i dobivanje rezultata koji nisu uvijek bili najoptimalniji, također je odabrano za provjeru valjanosti strana poslužitelja ali to korisniku nije pružilo prijateljsko iskustvo jer smo prvo morali obraditi podatke i čekati odgovor poslužitelja da provjeri jesu li svi naši podaci točni.
Nakon nekog vremena urednog rada s Javascript Za izvođenje svih vrsta operacija na strani klijenta, čini se da okviri olakšavaju stvari, među njima i jedan od najpoznatijih: jQuery; S unaprijed definiranom strukturom i čistijim i optimalnijim načinom rada, bilo je moguće ostaviti iza sebe sve loše prakse i dati razvojnom programeru puno potpuniji alat za postizanje ovih operacija, uključujući provjere valjanosti.
Ali iako jQuery omogućio mnoge operacije na strani klijenta, još nije razvijeno nešto što bi izravno napalo pitanje provjere valjanosti, zato je dodatak Bootstrap Validator koji koristi sve prednosti jQuery i okvir HTML5 Y CSS3, Bootstrap.
1. Bootstrap Validator
Bootstrap Validator je dodatak na kojem se temelji jQuery Y Bootstrap, omogućuje provjeru oblika, kao i elemenata unutar njega jednostavnim uključivanjem biblioteka dodataka i korištenjem njegovih moćnih, ali jednostavnih API, ovo bez zaboravljanja svih karakteristika koje ima, pogledajmo neke od ovih:
- Integracija sa fontovima i stilovima Bootstrap.
- Unaprijed definirana validacija polja koja uključuje: dužinu sadržaja, datume, kreditne kartice, telefone, e -poštu, između ostalog.
- Prilagođena provjera polja.
- Mogućnost dodavanja više potvrda po polju.
- Mogućnost prikaza ikone povratne informacije prema rezultatu provjere valjanosti.
- Mogućnost korištenja poruka u HTML prema rezultatu validacije.
Kao što smo mogli vidjeti, ove karakteristike čine opciju broj jedan koju treba razmotriti za provedbu provjera valjanosti u našim projektima.
Što nam je potrebno za korištenje?Da biste mogli koristiti Bootstrap Validator moramo uključiti jQuery po mogućnosti u najnovijoj verziji, Bootstrap iz vaše verzije 3.x i datoteke .css Y .js iz knjižare. Dodatno ćemo morati imati instalaciju web poslužitelja poput Wamp ako radimo na tome Windows ili Svjetiljka u Linux.
2. Validatori
Prije nego što prijeđete u praktični dio ovog vodiča, važno je znati neke od najvažnijih validatora koje koristi. Bootstrap Validator za rukovanje provjerama valjanosti unutar obrazaca, da vidimo:
base64Provjerava niz znakova kodiranih u bazi-64.
izmeđuProvjerite nalazi li se vrijednost polja strogo između dva zadana broja ili ne.
kreditna karticaPotvrdite broj kreditne kartice.
datumPotvrdite datum prema određenim opcijama među kojima se ističu format, maksimalni, minimalni datum, pa čak i razdjelnikom.
znamenkeVraća true ili true ako vrijednost sadrži samo brojeve.
email adresaKako mu naziv govori, potvrđuje e -adresu.
regexpPotvrđuje ako se dana vrijednost podudara ili odgovara regularnom izrazu od Javascript.
Ovo je samo mali uzorak kompletnog repertoara validatora u kojem imamo Bootstrap ValidatorZa potpuni popis validatora ovdje možemo unijeti i provjeriti onaj koji najbolje odgovara našim potrebama:
3. Obrazac za prijavu
Jedan od najvažnijih aspekata bilo koje trenutne web stranice je obrazac za prijavu, gdje naši korisnici mogu ući sa svojim korisničkim imenom i lozinkom na našu stranicu i uživati u dodatnim prednostima prilikom prijave.
Bootstrap Validator dopušta nam da dodatno potvrdimo ova dva polja s nekoliko jednostavnih redaka koda Bootstrap dopušta nam da mu damo dodatni pečat dopuštajući nam da na jednostavan način implementiramo modalni prozor, stvarajući tako obrazac za prijavu koji će izgledati profesionalno i ugodno oku korisnika.
Kako nećemo mijenjati izvorni kod bilo koje od gore navedenih datoteka, uključit ćemo ih iz njihovih odgovarajućih datoteka CDN, prvo ćemo uključiti datoteke .css toliko od Boostrap Kao Bootstrap Validator:
Sada ćemo uključiti datoteke .js a kako bismo imali mnogo čistiju strukturu, odvojit ćemo kôd naših provjera valjanosti u datoteku pod nazivom validator.js:
Tada ćemo koristiti prednosti Bootstrap za izgradnju našeg modalnog prozora, koji samo primjenom potrebnih klasa na elemente koji ga čine, primjenjuje željenu funkcionalnost:
Obrazac za prijavu×Pogledajmo kako naš primjer do sada izgleda kada ga pokrenemo u pregledniku:Prijaviti se
Korisničko imeLozinkaPrijaviti se
Naš modalni prozor već radi, zajedno s obrascem, sada moramo samo uključiti provjere valjanosti s Bootstrap Validator, za ovo ćemo inicijalizirati a dokument.spreman u našem dosjeu validator.js a unutar toga ćemo pozvati metodu boostrapValidator ():
$ ('# loginForm'). bootstrapValidator ({poruka: 'Ova vrijednost nije važeća', feedbackIcons: {valjano: 'glyphicon glyphicon-ok', nevažeće: 'glyphicon glyphicon-remove', valjano: 'glyphicon glyphicon-refresh' }, polja: {user: {validators: {notEmpty: {message: 'Korisničko ime je potrebno'}}}, lozinka: {validators: {notEmpty: {message: 'Lozinka je potrebna'}}}}}); Prvo što bismo trebali primijetiti u ovom kodu je korištenje birača za inicijalizaciju metode, u ovom slučaju koristimo ID oblika koji se naziva loginForm, ovo za proći kroz DOM stablo i doći do stavki ispod nje u hijerarhiji. Zatim definiramo opću poruku i ikone povratnih informacija, kako bismo dali vizualni pečat našem obrascu u slučaju uspjeha ili pogreške u provjerama.
Konačno imamo svoje potvrde i kako na prvi pogled možemo vidjeti da je to nešto izuzetno čitljivo i neprevaziđene jednostavnosti, označavamo naziv polja naših obrazaca i u ovom primjeru koristit ćemo jednu provjeru koja će biti obavezno polje, ali kako smo komentirali, može ih biti više od jednog po polju.
Pogledajmo na sljedećoj slici kako izgleda naš obrazac kada pokušamo poslati podatke bez ispunjavanja polja:
Kako vidimo da naše provjere valjanosti funkcioniraju i sve dok se podaci ne unesu u polja, obrazac neće izvršiti podnijeti Budući da je gumb zadano onemogućen, pogledajmo na sljedećoj slici kako izgleda naš obrazac kada unesemo potrebne podatke, a ikone povratnih informacija se u skladu s tim mijenjaju:
U nekoliko minuta smo uspjeli izgraditi obrazac za prijavu s odgovarajućim provjerama na strani klijenta zahvaljujući tome Bootstrap Validator.
4. Upisnica
Prethodni slučaj je jednostavan i vrlo koristan, ali nije jedini prisutan u razvoju, postoje registracijski obrasci koji sadrže mnogo više polja, a ograničenja u pogledu podataka koje treba unijeti su različita.
To je u prošlosti predstavljalo problem budući da se ovisno o broju polja morao provoditi brojač i provjeravati polje po polje, a kad je taj brojač dosegao određeni broj, značilo je da nema pogrešaka, pri čemu se ne zaboravljaju pojedinačne provjere svako polje, poput formata datuma, koji će prihvatiti samo brojeve ili čak duljinu polja.
S Boostrap Validator i njegovi unaprijed definirani validatori pomažu nam u ovom zadatku na jednostavan i brz način, da vidimo:
Prvo ćemo uključiti datoteke .css Y .js koje smo koristili u prethodnom primjeru, dodatno ćemo uključiti neke knjižnice kako bismo mogli koristiti birač datuma od Boostrap:
Nakon što to učinimo, sastavljamo obrazac i svakom polju dajemo odgovarajuće ime:
Pogledajmo kako ovaj obrazac izgleda u našem pregledniku:Upisnica
ImenaPrezimenaE -poštaLozinkaDatum rođenja*****MuškiŽenskiTelefonMobitelPrijava
Prije nego što pređemo na validacije, važno je da stavimo svoje birač datuma za to nam je samo potrebno uključiti sljedeće redove koda u našu datoteku validator.js i dajte mu ID koji naše polje ima u obliku:
$ (function () {$ ('# datetimepicker'). datetimepicker ({pickTime: false});}); Pogledajmo kako ovaj dodatak izgleda:
Kao što smo mogli vidjeti, obrazac ima mješovita polja, uključujući tekst, polja lozinke, birač datuma pa čak i radio tipke, ali to nije problem za Bootstrap Validator, koristit ćemo našu istu datoteku validator.js za provjere valjanosti samo moramo izvesti novu instancu metode boostrapValidator s ID -om novog obrasca i tamo uključuju isti:
$ ('# registrationForm'). bootstrapValidator ({feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validacija: 'glyphicon glyphicon-refresh'}, polja: {name: {validators: {notEmpty: {message: 'Ime je potrebno'}}}, prezime: {validators: {notEmpty: {message: 'Prezime je potrebno'}}}, email: {validators: {notEmpty: {message: ' E -adresa je obavezna i ne može biti prazna '}, emailAddress: {message:' E -pošta nije važeća '}}}, lozinka: {validators: {notEmpty: {message:' Lozinka je potrebna i ne može biti prazna '}, stringLength: {min: 8, message: 'Lozinka mora sadržavati najmanje 8 znakova'}}}, datumtimepicker: {validators: {notEmpty: {message: 'Datum rođenja je obavezan i ne može biti prazan'}, datum: {format: 'YYYY-MM-DD', poruka: 'Datum rođenja nije važeći'}}}, *****: {validators: {notEmpty: {message: '*****je potrebno '}}}, telefon: {message:' Telefon ili nije važeći ', validatori: {notEmpty: {message:' Telefon je potreban i ne može biti prazan '}, regexp: {regexp: / [0-9] + $ /, poruka:' Telefon može biti samo sadrže brojeve '}}}, telefono_cel: {poruka:' Telefon nije važeći ', validatori: {regexp: {regexp: / [0-9] + $ /, poruka:' Telefon može sadržavati samo brojeve '} }},}}); Možemo vidjeti da su za prve dvije provjere slične prethodnom primjeru, ali kad pronađemo polje e -pošte, vidimo da ima provjeru potrebnog polja i dodatno s validatorom email adresa Provjeravamo da li je valjana e -pošta, da vidimo kako se ponaša ova provjera valjanosti:
S berač datulja Nemamo problema s unosom datuma, no ako želimo to primiti na što čistiji način, možemo potvrditi format kao što možemo vidjeti u sljedećoj provjeri u kojoj označavamo da bi format trebao biti GGGG-MM-DD što vrijedi za:
Možemo čak potvrditi s koliko znakova može biti lozinka stringLength i mogućnost min:
Kako bismo dovršili i pokazali snagu ovog dodatka, provjerit ćemo telefon, mogli bismo upotrijebiti provjeru znamenki, ali u ovom slučaju koristit ćemo nešto složenije poput regularnog izraza, a najbolje od svega je što već imamo potvrdu za da je regexp, Pogledajmo kako to funkcionira u našem obliku:
Nakon što smo već testirali ispravnost svih naših provjera valjanosti, ispravit ćemo sve podatke u našem obrascu i vidjeti kako to izgleda s odgovarajućim podacima:
Time završavamo ovaj vodič u kojem smo naučili koristiti provjere valjanosti Boostrap Validator, snažan dodatak koji ne zahtijeva instalaciju ili konfiguraciju i koji nam omogućuje da brzo i jednostavno potvrdimo svoje obrasce s nekoliko jednostavnih redaka koda.
