Pregled potrjevanja obrazca HTML

Spletni obrazci so pogosto najbolj uporabljen in bistveni del spletnih aplikacij. Validacija obrazca je postopek potrjevanja podatkov, ki jih vnese uporabnik v skladu z vnaprej določenimi pravili. Preverjanje obrazca se lahko izvede na strani odjemalca ali na strani strežnika. Validacija obrazca HTML je oblika potrjevanja na strani odjemalca, kjer bo preverjanje podatkov izvedeno pred pošiljanjem podatkov na strežnik. Preverjanje obrazca HTML je pomembno in koristno, ker izboljšuje uporabniški vmesnik na strani odjemalca in delovanje spletne aplikacije.

Potrjevanje obrazca HTML

V glavnem obstajata dva načina preverjanja veljavnosti obrazca HTML,

  • Uporaba vgrajene funkcionalnosti HTML5
  • Uporaba JavaScript

1. Uporaba vgrajene funkcionalnosti HTML5

HTML5 nudi to funkcijo preverjanja obrazca brez uporabe JavaScript. Elementi obrazca bodo dodani atributi potrjevanja, ki bodo omogočili avtomatsko preverjanje obrazca za nas. Atributi potrjevanja nam omogočajo, da na elemente obrazca določimo različne vrste pravil. Omogočajo nam, da določimo dolžino podatkov, nastavimo omejitev vrednosti podatkov itd.

Poglejmo en preprost primer potrjevanja obrazca HTML z uporabo vgrajenih elementov za preverjanje obrazca in bomo nadaljevali preverjanje HTML obrazca z uporabo JavaScript.

Primer

Potrjevanje obrazca z atributom potrditve HTML5 - V tem primeru bomo uporabili potrebno oznako za preverjanje obrazca, ki bo povzročila obvezen vnos podatkov v to polje, sicer obrazec ne bo predložen. Spodaj je delček kode za isto in nekaj stilov spletnega obrazca.



.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:


Tako imamo zelo preprost spletni obrazec, skupaj z le enim vhodnim podatkovnim poljem kot "Ime". Upoštevajte, da smo v elementu vhodne oznake uporabili zahtevano ključno besedo.

Izhod :

Poskusimo predložiti obrazec, ne da v ime ime vnesemo nobeno vrednost. Ob oddaji boste dobili sporočilo o napaki kot "Prosimo, da izpolnite to polje" in obrazec ne bo oddan.

Izhod z praznimi podatki

Tako je razvidno, da sporočila o napaki ne dodajamo sami in ga poda sam HTML.

Tako kot zahtevani atribut, ki ga nudi HTML, so na voljo tudi različne oznake obrazcev. Spodaj je seznam nekaterih oznak za preverjanje obrazca,

  • najmanjša dolžina : Uporablja se za določitev zahtevane najmanjše dolžine elementa
  • maxlength: Uporablja se za nastavitev zahtevane največje dolžine elementa
  • vzorec: Uporablja se za določanje pravilnega izraza

2. Uporaba JavaScript

JavaScript se široko uporablja za preverjanje obrazca HTML, saj ponuja več načinov za prilagajanje in nastavitev pravil za preverjanje veljavnosti, tudi nekatere oznake v HTML5 v starejših različicah Internet Explorerja niso podprte. JavaScript se že dolgo uporablja za potrjevanje obrazca.

V preverjanju veljavnosti JavaScript v osnovi določimo funkcije za preverjanje veljavnosti podatkov, preden jih pošljemo strežniku. Izvedemo lahko kakršno koli logiko, potrebno za dosego pravil potrjevanja. JavaScript je na ta način bolj prilagodljiv, ker ni nobene omejitve pri definiranju pravil. Za izvajanje tega pa je treba imeti znanje o JavaScript, v primerjavi z validacijo obrazca z uporabo vgrajenih oznak.

Poglejmo primer potrjevanja obrazca z uporabo JavaScript. Isti primer obrazca bomo izvedli le z enim vhodom kot element z imenom.

Primer:



.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;
)
)

Iz prejšnjega primera smo odstranili zahtevano oznako iz elementa obrazca »ime«. Namesto tega smo v element obrazca dodali eno oznako. Kot smo že omenili, bomo za preverjanje veljavnosti zapisali funkcijo pisanja.

Napisali smo funkcijo z imenom validateForm (), ki bo opravila preverjanje. Izvajamo isto pravilo preverjanja, ali so vneseni podatki v imeno polje prazni ali ne. Logika za preverjanje tega je s klikom gumba za oddajo, ta funkcija bo poklicana in vnesena vrednost bo preverjena, ali je nična ali prazna. Funkcija se vrne true, če podatki niso nični ali prazni, če pa so podatki prazni ali nični, se uporabniku prikaže sporočilo o napaki.

Izhod

Če poskušamo predložiti obrazec brez vnosa podatkov, bi morali na zaslonu dobiti sporočilo o napaki. Kot je razvidno iz primera, da smo sporočilo o napaki zasnovali na enak način.

Izhod z praznimi podatki

Zaključek - Potrjevanje obrazca HTML

Tako smo videli zelo preprost primer potrjevanja obrazca na strani stranke. V glavnem obstajata dva načina za preverjanje potrditve obrazca HTML. Prvo je uporaba vgrajene funkcionalnosti, ki je na voljo v HTML5, in drugo z uporabo JavaScript. S prvo metodo nam ni treba pisati dodatne kode.

Priporočeni članki

To je vodnik za preverjanje obrazca HTML. Tukaj razpravljamo o pregledu in dveh načinih preverjanja HTML obrazca, s katerimi jih je mogoče izvesti. Za več informacij si lahko ogledate tudi naslednje članke -

  1. Dogodki HTML
  2. Različice HTML
  3. Elementi HTML5
  4. Aplikacije HTML

Kategorija:

Orodja za razvoj spletnih strani