Unul dintre cele mai importante puncte din dezvoltarea web și care uneori este neglijat sau nu este acordat atenția necesară este validarea formularului și dintre câmpurile care le cuprind, aceste validări variază de la ce valori pot accepta, lungimea lor până la faptul dacă sunt necesare sau nu.
Aceste validări ale partea clientului în trecut au fost realizate de Javascript construind funcții greoaie pentru a valida câteva câmpuri și a obține rezultate care nu au fost întotdeauna cele mai optime, a fost de asemenea ales să valideze partea de server dar acest lucru nu a oferit utilizatorului o experiență prietenoasă, deoarece mai întâi a trebuit să procesăm datele și să așteptăm răspunsul de la server pentru a verifica dacă toate datele noastre au fost corecte.
După un timp în care am lucrat cu îngrijire Javascript Pentru a efectua tot felul de operațiuni din partea clientului, cadrele par să ușureze lucrurile, printre care una dintre cele mai faimoase: jQuery; Cu o structură predefinită și un mod de a face lucrurile mai curat și mai optim, a fost posibil să lase în urmă toate practicile proaste și să oferi dezvoltatorului un instrument mult mai complet pentru realizarea acestor operațiuni, inclusiv validări.
Dar chiar si asa jQuery a facilitat multe operațiuni din partea clientului, încă nu a fost dezvoltat ceva care să atace în mod direct problema validărilor, de aceea pluginul Bootstrap Validator care folosește toate beneficiile jQuery și cadrul HTML5 Da CSS3, Bootstrap.
1. Bootstrap Validator
Bootstrap Validator este un plugin pe care se bazează jQuery Da Bootstrap, permite validarea formularelor, precum și a elementelor din acesta, cu o simplă includere a bibliotecilor de pluginuri și utilizarea puternicului, dar simplu API, fără a uita toate caracteristicile pe care le are, să vedem câteva dintre acestea:
- Integrare cu fonturi și stiluri Bootstrap.
- Validări predefinite ale câmpului care includ: lungimea conținutului, date, carduri de credit, telefoane, e-mail, printre altele.
- Validări personalizate pentru câmpuri.
- Posibilitatea de a adăuga mai multe validări pe câmp.
- Posibilitatea de a afișa o pictogramă de feedback în funcție de rezultatul validării.
- Posibilitatea de a folosi mesaje în HTML conform rezultatului validării.
După cum am putut vedea, aceste caracteristici fac din aceasta opțiunea numărul unu de luat în considerare pentru implementarea validărilor în proiectele noastre.
De ce avem nevoie pentru ao folosi?Pentru a putea folosi Bootstrap Validator trebuie să includem jQuery în ultima sa versiune, de preferință, Bootstrap din versiunea ta 3.x și fișierele .css Da .js din librărie. În plus, va trebui să avem o instalare de server web, cum ar fi Wamp dacă lucrăm la Windows sau Lampă în Linux.
2. Validatori
Înainte de a intra în partea practică a acestui tutorial, este important să cunoașteți unele dintre cele mai importante validatoare pe care le folosește. Bootstrap Validator pentru gestionarea validărilor în cadrul formularelor, să vedem:
baza64Validează un șir de caractere codat de bază 64.
întreVerificați dacă valoarea unui câmp este strict între două numere date sau nu.
Card de creditValidați un număr de card de credit.
DataValidați o dată în funcție de anumite opțiuni printre care se remarcă formatul, o dată maximă, minimă și chiar prin separator.
cifreReturnează adevărat sau adevărat dacă valoarea conține doar numere.
Adresa de emailDupă cum sugerează și numele, validează o adresă de e-mail.
regexpValidează dacă valoarea dată se potrivește sau corespunde unei expresii regulate a Javascript.
Acesta este doar un mic eșantion din repertoriul complet de validatori pe care îl avem Bootstrap ValidatorPentru lista completă a validatorilor, putem intra aici și o putem verifica pe cea care se potrivește cel mai bine nevoilor noastre:
3. Formular de autentificare
Unul dintre cele mai importante aspecte ale oricărui site web actual este formular de autentificare, unde utilizatorii noștri pot introduce cu numele de utilizator și parola pe pagina noastră și se pot bucura de avantaje suplimentare atunci când se conectează.
Bootstrap Validator ne permite să validăm aceste două câmpuri cu câteva linii simple de cod, în plus Bootstrap ne permite să îi oferim o notă suplimentară, permițându-ne să implementăm o fereastră modală într-un mod simplu, construind astfel un formular de conectare care va arăta profesional și plăcut pentru ochiul utilizatorului.
Deoarece nu vom face nicio modificare a codului sursă al fiecăruia dintre fișierele menționate mai sus, le vom include din respectivele lor fișiere CDN, mai întâi vom include fișierele .css atât de mult Boostrap ca Bootstrap Validator:
Acum vom include fișierele .js și pentru a avea o structură mult mai curată, vom separa codul validărilor noastre într-un fișier numit validator.js:
Atunci vom folosi beneficiile Bootstrap pentru a construi fereastra noastră modală, care doar prin aplicarea claselor necesare elementelor care o compun, se aplică funcționalitatea dorită:
Formular de autentificare×Să vedem cum arată exemplul nostru până acum când îl rulăm în browser:Autentificare
Nume de utilizatorParolaAutentificare
Avem deja fereastra noastră modală de lucru, împreună cu formularul nostru, acum trebuie doar să includem validările cu Bootstrap Validator, pentru aceasta vom inițializa a document.preparat în dosarul nostru validator.js iar în cadrul acesta vom numi metoda boostrapValidator ():
$ ('# loginForm'). bootstrapValidator ({mesaj: 'Această valoare nu este validă', feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validare: 'glyphicon glyphicon-refresh' }, câmpuri: {user: {validators: {notEmpty: {message: 'Username is required'}}}, parola: {validators: {notEmpty: {message: 'Password is required'}}}}}) Primul lucru pe care ar trebui să-l observăm în acest cod este utilizarea selectorului pentru a inițializa metoda, în acest caz folosim ID-ul formularului care se numește loginForm, asta pentru a trece prin Copac DOM și ajungeți la elementele de sub ea în ierarhie. Apoi definim un mesaj general și pictogramele de feedback, pentru a da o notă vizuală formularului nostru în caz de succes sau eroare în validări.
În cele din urmă avem validările noastre și modul în care putem vedea dintr-o privire este ceva extrem de lizibil și de o simplitate inegalabilă, indicăm numele câmpurilor formularelor noastre și în acest exemplu vom folosi o validare unică care va fi cea a câmp obligatoriu, dar după cum am comentat, pot fi mai mult de unul pe câmp.
Să vedem în imaginea următoare cum arată formularul nostru atunci când încercăm să trimitem informațiile fără a fi completat câmpurile:
Cum vedem că funcționează validările noastre și până când nu sunt introduse informații în câmpuri, formularul nu va efectua Trimite Deoarece butonul este dezactivat în mod implicit, să vedem în imaginea următoare cum arată formularul nostru atunci când introducem datele necesare și pictogramele de feedback se modifică în consecință:
În câteva minute am reușit să construim un formular de autentificare cu validările sale respective din partea clientului, toate datorită Bootstrap Validator.
4. Formular de înregistrare
Cazul anterior este simplu și destul de util, dar nu este singurul prezent în evoluții, există formulare de înregistrare care conțin mult mai multe câmpuri, iar restricțiile privind informațiile care trebuie introduse sunt diferite.
Aceasta în trecut a prezentat o problemă deoarece, în funcție de numărul de câmpuri, trebuia efectuat un contor și validat câmp cu câmp și când acest contor atingea un anumit număr însemna că nu există erori, asta fără a uita validările individuale ale fiecare câmp, cum ar fi formatele de dată, care vor accepta numai numere sau chiar lungimea câmpului.
Cu Validator Boostrap și validatorii săi predefiniți ne ajută în această sarcină într-un mod simplu și rapid, să vedem:
Mai întâi vom include fișierele .css Da .js pe care l-am folosit în exemplul anterior, vom include în plus câteva biblioteci pentru a putea utiliza datetimepicker de Boostrap:
Odată ce acest lucru este realizat, ne construim formularul și oferim fiecărui câmp un nume adecvat:
Să vedem cum arată acest formular în browserul nostru:Formular de înregistrare
NumeleNumele de familieE-mailParolaData de nastere*****MasculinFemininTelefonTelefon mobilCheck-in
Înainte de a trece la validări, este important să ne punem datetimepicker pentru aceasta trebuie doar să includem următoarele linii de cod în fișierul nostru validator.js și dați-i ID-ul pe care îl are câmpul nostru sub forma:
$ (function () {$ ('# datetimepicker'). datetimepicker ({pickTime: false});}); Să vedem cum arată acest plugin:
După cum am putut vedea, formularul are câmpuri mixte, inclusiv text, câmpuri de parolă, datetimepicker și chiar butoane radio, dar aceasta nu este o problemă pentru Bootstrap Validator, vom folosi același fișier validator.js pentru validări trebuie doar să realizăm o nouă instanță a metodei boostrapValidator cu ID-ul noului formular și includ același lucru:
$ ('# registrationForm'). bootstrapValidator ({feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh'}, câmpuri: {nume: {validatori: {notEmpty: {message: 'Prenumele este obligatoriu'}}}, prenumele: {validators: {notEmpty: {message: 'Numele este necesar'}}}, email: {validators: {notEmpty: {message: ' E-mailul este obligatoriu și nu poate fi gol '}, emailAddress: {message:' E-mailul nu este valid '}}}, parola: {validators: {notEmpty: {message:' Parola este necesară și nu poate fi goală '}, stringLength: {min: 8, message: 'Parola trebuie să conțină cel puțin 8 caractere'}}}, datetimepicker: {validators: {notEmpty: {message: 'Data nașterii este obligatorie și nu poate fi goală'}, data: {format: 'AAAA-LL-ZZ', mesaj: 'Data nașterii nu este validă'}}}, *****: {validatori: {notEmpty: {mesaj: '**** * este obligatoriu '}}}, telefon: {message:' Telefonul sau nu este valid ', validatori: {notEmpty: {message:' Telefonul este necesar și nu poate fi gol '}, regexp: {regexp: / [0-9] + $ /, mesaj:' Telefonul poate fi conține numere '}}}, telefono_cel: {message:' Telefonul nu este valid ', validatori: {regexp: {regexp: / [0-9] + $ /, message:' Telefonul poate conține doar numere '} }},}}); Putem vedea că pentru primele două validări sunt similare cu exemplul anterior, dar când găsim câmpul de e-mail, vedem că are validarea câmpului necesar și în plus cu validatorul Adresa de email Verificăm dacă este un e-mail valid, să vedem cum se comportă această validare:
Cu datapicker Nu avem probleme la introducerea datelor, totuși, dacă dorim să primim acest lucru în cel mai curat mod posibil, putem valida formatul așa cum putem vedea în următoarea validare, unde indicăm că formatul ar trebui să fie AAAA-LL-ZZ pentru ce este valabil:
Putem chiar valida câte caractere poate avea parola stringLength și opțiunea de min:
Pentru a termina și a demonstra puterea acestui plugin, vom valida telefonul, am putea folosi validatorul de cifre, dar în acest caz vom folosi ceva mai complex, cum ar fi o expresie regulată, iar cel mai bun dintre toate este că avem deja un validator pentru că: regexp, Să vedem cum funcționează în forma noastră:
După ce am testat deja că toate validările noastre funcționează corect, vom corecta toate informațiile din formularul nostru și vom vedea cum arată cu informațiile adecvate:
Cu aceasta terminăm acest tutorial, în care am învățat să folosim validările de Validator Boostrap, un plugin puternic care nu are nevoie de instalare sau configurare și care ne permite să validăm formularele noastre rapid și ușor cu câteva linii simple de cod.
