Pregled provjere HTML obrasca

Web obrasci su najčešće najčešće korišteni i najvažniji dio web aplikacija. Provjera obrasca je postupak provjere podataka koje je korisnik unijeo prema unaprijed definiranim pravilima. Provjera obrasca može se dogoditi ili na strani klijenta ili na strani poslužitelja. Provjera HTML obrasca oblik je provjere na strani klijenta u kojem će se izvršiti provjera podataka prije slanja podataka na poslužitelj. Provjera HTML obrasca značajna je i korisna jer poboljšava korisničko sučelje na strani klijenta i performanse web aplikacije.

Potvrda HTML obrasca

Postoje uglavnom dva načina na koje se može provesti provjera valjanosti HTML obrasca,

  • Korištenje ugrađene funkcionalnosti HTML5
  • Korištenje JavaScripta

1. Korištenje ugrađene funkcionalnosti HTML5

HTML5 pruža ovu značajku provjere obrasca bez upotrebe JavaScripta. Elementi obrasca imat će atribute provjere valjanosti koji će automatski omogućiti potvrdu obrasca. Atributi provjere omogućuju nam određivanje različitih vrsta pravila na našim elementima obrasca. Omogućuju nam postavljanje duljine podataka, postavljanje ograničenja na vrijednosti podataka itd.

Pogledajmo jedan jednostavan primjer provjere HTML obrasca pomoću ugrađenih elemenata za provjeru oblika, a zatim ćemo nastaviti dalje za provjeru HTML obrasca pomoću JavaScripta.

Primjer

Validacija obrasca pomoću atributa HTML5 provjere valjanosti - U ovom ćemo primjeru upotrijebiti potrebnu oznaku za provjeru oblika koja će uzrokovati da se u to polje obavezno unose podaci, a u protivnom obrazac neće biti poslan. Ispod je isječak koda za isti, zajedno s nekim stilovima web obrasca.



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


Stoga imamo vrlo jednostavan web obrazac zajedno s samo jednim poljem podataka kao "Ime". Imajte na umu da smo u elementu oznake unosa koristili potrebnu ključnu riječ.

Izlaz :

Pokušajmo poslati obrazac bez unosa vrijednosti u polje imena. Nakon slanja, dobit ćete poruku o pogrešci kao "Molimo ispunite ovo polje" i obrazac se neće predati.

Izlaz s praznim podacima

Tako se vidi da poruku o pogrešci nismo dodali mi, a šalje je sam HTML.

Kao i potrebni atribut koji pruža HTML, dostupne su razne oznake oblika koje se mogu koristiti. Ispod je popis nekih oznaka za provjeru oblika,

  • minlength: Koristi se za postavljanje potrebne minimalne duljine elementa
  • maxlength: Koristi se za postavljanje potrebne maksimalne duljine elementa
  • uzorak: koristi se za definiranje regularnog izraza

2. Korištenjem JavaScripta

JavaScript se široko koristi za provjeru valjanosti HTML obrasca jer pruža više načina prilagođavanja i postavljanja pravila za provjeru valjanosti, a neke od oznaka u HTML5 nisu podržane u starijim verzijama Internet Explorera. JavaScript se dugo koristi za provjeru oblika.

U provjeri JavaScripta obrasca u osnovi definiramo funkcije za potvrđivanje podataka prije nego što ih pošaljemo na poslužitelj. Možemo implementirati svaku logiku potrebnu za postizanje pravila za provjeru valjanosti. JavaScript je na taj način fleksibilniji jer nema ograničenja u definiranju pravila. Ali za to je potrebno imati znanje JavaScripta u usporedbi s provjerom valjanosti pomoću ugrađenih oznaka.

Pogledajmo primjer provjere obrasca pomoću JavaScripta. Provest ćemo isti primjer obrasca sa samo jednim ulazom kao i element imena.

Primjer:



.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 prethodnog primjera uklonili smo potrebnu oznaku iz elementa oblika "name". Umjesto toga, dodali smo po jednu oznaku u elementu obrasca. Kao što smo već spomenuli, pisat ćemo funkciju za provjeru valjanosti za koji je dodan tag.

Napisali smo funkciju koja se zove validateForm () koja će izvršiti provjeru valjanosti. Provodimo isto pravilo provjere jesu li uneseni podaci u polje imena prazni ili ne. Logika da se to provjeri je klikom na gumb za slanje, ova funkcija će se pozvati i unesena vrijednost će se provjeriti je li nula ili je prazna. Funkcija će se vratiti true ako podaci nisu nula ili prazno, ali ako su podaci prazni ili null, tada se korisniku prikazuje poruka o pogrešci.

Izlaz

Ako pokušamo predati obrazac bez unošenja bilo kakvih podataka, trebali bismo dobiti poruku o pogrešci na ekranu. Kao što se vidi iz primjera da smo poruku o pogrešci osmislili na isti mogući način.

Izlaz s praznim podacima

Zaključak - Potvrda HTML obrasca

Stoga smo vidjeli vrlo jednostavan primjer provjere obrasca na strani klijenta. Postoje dva načina za provjeru valjanosti HTML obrasca. Prvo je korištenje ugrađene funkcionalnosti koju nudi HTML5, a drugo upotrebom JavaScripta. Koristeći prvu metodu, ne trebamo pisati dodatni kod.

Preporučeni članci

Ovo je vodič za provjeru HTML obrasca. Ovdje smo raspravljali o pregledu i dva načina provjere HTML obrasca pomoću kojih se oni mogu izvesti. Možete također pogledati sljedeće članke da biste saznali više -

  1. HTML događaji
  2. Verzije Html
  3. Elementi HTML5
  4. Primjene HTML-a

Kategorija:

Alati za web razvoj