Prezentare generală a validării formularelor HTML
Formele web sunt adesea cea mai folosită și esențială parte a aplicațiilor web. Validarea formularului este procesul de validare a datelor introduse de utilizator împotriva regulilor predefinite. Validarea formularului poate avea loc fie la partea clientului, fie la partea serverului. Validarea formularului HTML este forma de validare din partea clientului, unde validarea datelor va fi efectuată înainte de a trimite datele către server. Validarea formularelor HTML este semnificativă și utilă, deoarece îmbunătățește interfața de utilizator din partea clientului și performanța aplicației web.
Validare formular HTML
Există în principal două moduri prin care se poate realiza validarea formularului HTML,
- Utilizarea funcționalității HTML5 încorporate
- Folosind JavaScript
1. Utilizând funcționalitatea HTML5 încorporată
HTML5 oferă această caracteristică de validare a formularului fără a utiliza JavaScript. Elementele de formular vor avea adăugate atribute de validare care vor permite validarea formularului pentru noi automat. Atributele de validare ne permit să specificăm diverse tipuri de reguli cu privire la elementele noastre de formă. Ele ne permit să stabilim lungimea datelor, să stabilim o restricție la valorile datelor etc.
Să vedem un exemplu simplu de validare a formularelor HTML folosind elemente de validare a formularului încorporate și vom continua apoi pentru validarea formularelor HTML folosind JavaScript.
Exemplu
Validarea formularului folosind atributul de validare HTML5 - În acest exemplu vom folosi eticheta de validare a formularului necesară, care va determina introducerea obligatorie a datelor din acest câmp, altfel formularul nu va fi transmis. Mai jos este fragmentul de cod pentru același, împreună cu unele stiluri ale unui formular web.
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
Name:
Deci avem un formular web foarte simplu, împreună cu un singur câmp de date de intrare ca „Nume”. Vă rugăm să rețineți că am folosit cuvântul cheie necesar în elementul de etichetă de intrare.
Rezultat :
Să încercăm să trimiteți formularul fără a introduce nicio valoare în câmpul de nume. După trimitere, veți primi mesajul de eroare ca „Vă rugăm să completați acest câmp”, iar formularul nu va fi trimis.
Ieșire cu date necompletate
Deci se poate vedea că mesajul de eroare nu este adăugat de noi și este furnizat de HTML în sine.
La fel ca atributul cerut furnizat de HTML, există diferite etichete de formular care sunt disponibile pentru a fi utilizate. Mai jos este lista unor etichete de validare a formularului,
- lungime minlă: Se folosește pentru a seta lungimea minimă necesară a unui element
- lungime maximă: Se folosește pentru a seta lungimea maximă necesară a unui element
- pattern: utilizat pentru a defini o expresie regulată
2. Folosind JavaScript
JavaScript este utilizat pe scară largă pentru validarea formularelor HTML, deoarece oferă mai multe modalități de personalizare și setare a regulilor de validare, de asemenea unele dintre etichetele furnizate în HTML5 nu sunt acceptate în versiunile mai vechi de Internet Explorer. JavaScript este folosit de mult timp pentru validarea formularului.
În validarea formularului JavaScript, practic, definim funcțiile de validare a datelor înainte de a le trimite serverului. Putem implementa orice logică necesară pentru realizarea regulilor de validare. JavaScript este mai flexibil în acest fel, deoarece nu există nicio restricție la definirea regulilor. Dar este necesar să aveți cunoștințe de JavaScript pentru a implementa acest lucru în comparație cu validarea formularului folosind tag-uri încorporate.
Să vedem exemplul validării formularului folosind JavaScript. Vom implementa același exemplu de formular cu o singură intrare ca element de nume.
Exemplu:
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
.errorMessage (
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
)
.errorMessage.top-arrow:after (
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
)
Name:
function validateForm() (
var nameVal = document.forms("simpleForm")("name").value;
if(nameVal == null || nameVal == "") (
document.getElementsByClassName( "errorMessage" )(0).style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )(0).innerHTML = "Please Fill out this field";
return false;
) else (
return true;
)
)
Din exemplul anterior, am eliminat eticheta necesară din elementul formular „nume”. În schimb, am adăugat o etichetă onsubmit în elementul formular. După cum am menționat anterior, vom scrie funcția de validare pentru care este adăugată eticheta.
Am scris o funcție numită validateForm () care va face validarea. Implementăm aceeași regulă pentru a verifica dacă datele introduse în câmpul nume sunt necompletate sau nu. Logica pentru a verifica acest lucru se face printr-un clic al butonului de trimitere, această funcție va fi apelată și valoarea introdusă va fi verificată dacă este nulă sau nu. Funcția va reveni adevărat în cazul în care datele nu sunt nule sau necompletate, dar dacă datele sunt necompletate sau nule, atunci mesajul de eroare este afișat utilizatorului.
producție
Dacă încercăm să trimitem formularul fără a introduce date, ar trebui să primim mesajul de eroare pe ecran. După cum se poate observa din exemplul că am conceput mesajul de eroare în același mod posibil.
Ieșire cu date necompletate
Concluzie - validare formular HTML
Prin urmare, am văzut un exemplu foarte simplu de validare a formularelor din partea clientului. În principal, există două moduri de a efectua validarea formularelor HTML. Prima este folosirea funcționalității încorporate furnizate în HTML5, iar a doua este folosirea JavaScript. Folosind prima metodă, nu trebuie să scriem cod suplimentar.
Articole recomandate
Acesta a fost un ghid pentru validarea formularelor HTML. Aici discutăm imaginea de ansamblu și două moduri de validare a formularelor HTML prin care pot fi realizate. De asemenea, puteți arunca o privire la următoarele articole pentru a afla mai multe -
- Evenimente HTML
- Versiuni de HTML
- Elemente HTML5
- Aplicații HTML