Introducere în validarea formularelor Bootstrap
Validarea este utilizată pentru a forma Acceptarea cu unele reguli și regulamente. Bootstrap are multe clase pentru a crea un formular. Dar validarea necesită date de control despre formular. În acest subiect, vom afla despre tipurile de validare a formularului Bootstrap.
De exemplu, formularul are o parolă. Parola are multe reguli în funcție de cerințe. Cineva are nevoie de litere, mulți au nevoie de numere, în caz contrar, cineva cere orice caractere speciale. Utilizatorul cunoaște îndeplinirea cerinței, validarea este importantă.
Uneori, utilizatorul nu primește cerința exactă a formularului sau cât de mult trebuie să îndeplinească, validarea timpului este utilă pentru a trimite datele corect. Dacă nu respectați specificația, atunci primiți feedback-ul în formular automat.
Cum se validează formularele cu Bootstrap?
- Formularul bootstrap face validarea să depășească toate complicațiile de codare JavaScript și să funcționeze ușor cu clasele.
- Validarea formei de bootstrap cu trei glificon oferă un mesaj de eroare, avertizare și succes. Clasele de validare plasate întotdeauna în clasa părintească.
- Împreună cu clasele de validare, necesită și clasa de feedback pentru a obține pictograma la locul potrivit în caseta de introducere a formularului, împreună cu eticheta. Această clasă plasată în clasa părintească.
Exemplu:
Clasa form-control-feedback a fost, de asemenea, necesară cu pictograma glyphicon pentru a seta pictograma în caseta formularului de introducere.
Exemplu:
Tipuri de validare a formelor Bootstrap
Există 3 tipuri de formular Bootstrap așa cum se menționează mai jos:
1. are-succes
Această clasă obișnuia să primească mesajul de succes. Cu această clasă de validare, utilizatorii au nevoie și de pictograma „glyphicon glyphicon-ok” pentru a arăta pictograma succesului. Dacă utilizatorul introduce corect formularul, atunci validarea a funcționat.
Clasa cu succes are o clasă părintească. Pentru a obține mesajul de succes pentru a utiliza această validare. Exemplul de mai jos oferă formatul de formă orizontală. Ieșirea vine cu mesajul în culoarea verde.
Sintaxă:
.
Exemplu:
Paasword
ieşire:
2. are-avertizare
Această clasă folosită pentru mesajele de avertizare cu introducerea formularului. Cu această clasă de validare, utilizatorii au nevoie, de asemenea, de o pictogramă „glicic-glicic-avertizare-semn” pentru a arăta pictograma de avertizare. Dacă introducem o introducere greșită în formular, avem încă o șansă să introducem intrarea în care a funcționat validarea avertismentului de timp.
Clasa de validare de avertizare plasată în clasa părinte cu o clasă de feedback. Dacă utilizatorul primește avertizarea unui fel de greșeală, această clasă a funcționat. Rezultatul vine cu mesajul în culoare galbenă.
Sintaxă:
.
Exemplu:
Paasword
ieşire:
3. are-eroare
Această clasă folosită pentru mesajul de eroare de introducere a formularului. Cu această clasă de validare, utilizatorii au nevoie, de asemenea, de pictograma „glyphicon-remove-glyphicon” pentru a arăta pictograma de eroare. Dacă introducem o introducere greșită în formular, această validare a funcționat.
Clasa de validare a erorilor plasată în clasa părinte cu o clasă de feedback. Dacă utilizatorul primește mesajul de eroare, atunci această clasă a funcționat.
Sintaxă:
Exemplu:
Paasword
ieşire:
Descriere: Toate forma este un aspect orizontal. Eticheta are 2 coloane, iar intrarea are 10 coloane. Clasa de validare setată cu feedback-ul în div. Pentru a vedea utilizatorul pictogramelor s-au folosit pictograme de glifon cu control de formulare în feedback
Utilizatorii lucrează la parola. fie parola este corectă, atunci procesul de validare a succesului sau parola este greșită, atunci lucrarea de validare a erorilor. Dacă parola are unele greșeli și putem să corectăm, atunci avertizarea lucrează.
Exemple de validare a formularelor Bootstrap
Mai jos sunt diferite exemple de validare a formularelor bootstrap:
Exemplul # 1
Următorul exemplu este Validarea cu forma orizontală. Semnul Glyphicon este lucrul pe caseta de intrare în formular. Etichetă și intrare într-o linie orizontală, dar toată clasa grupului de forme este plasată vertical.
Success
Warning
Error
ieşire:
Exemplul # 2
Următorul exemplu este Validarea cu forma verticală. În forma verticală, toate etichetele și intrările sunt situate vertical. Glyphicon poate fi amplasat pe linia etichetei de la capătul casetei de intrare.
Nu există o clasă în formă. Acesta este rar utilizat în validarea formei în bootstrap.
Success
Warning
Error
ieşire:
Exemplul # 3
Următorul exemplu este Validarea cu forma inline. Formularul inline conține toate etichetele și intrările într-o singură linie, inclusiv toate grupele de formulare. Aceasta este o pictogramă complicată, dar de validare plasată în caseta de introducere a formularului.
Dacă utilizatorii au nevoie doar de formular mic și formular de autentificare, atunci cu validări, se poate aplica formularul inline.
Success
Warning
Error
ieşire:
Mai presus de toate, are toate tipurile de validare cu toate aspectele și modul de funcționare. În conformitate cu cerințele utilizatorului și ușurința, alegeți formatul validării formularului și al machetei.
Concluzie
În mare parte, validarea formularului are loc pe server pentru a controla datele de formă dintr-o bază de date. În aceste scopuri, obținem multe codări complicate și folosim metoda de validare folosind limbajul JavaScript.
Bootstrap a făcut toate lucrurile într-o singură pagină de formă evitând complicațiile și codarea îndelungată și a controlat datele formularului fără efort.
Articole recomandate
Acesta este un ghid pentru validarea formularului Bootstrap. Aici discutăm cele 3 tipuri de validare a formularelor Bootstrap împreună cu exemplele adecvate. De asemenea, vă puteți uita la articolul următor.
- Dispunerea cizmei
- Componente pentru bootstrap
- Ce este Bootstrap?
- Comenzi de bootstrap
- Schemă Formular Bootstrap cu exemple
- Formulare în JavaScript | Program pentru validarea formularului