Provjera valjanosti podataka bitan je dio svake web-aplikacije jer pomaže osigurati da podaci koji se učitavaju odgovaraju određenim zahtjevima koje nameću programeri. Podaci se mogu provjeriti i na strani poslužitelja i na strani klijenta, ali provjera valjanosti na strani klijenta često štedi vrijeme korisnika i dokazuje ljepše i glatko korisničko iskustvo. Provjera valjanosti podataka na strani klijenta može se obaviti jednostavno i zahtijeva puno manje vremena.
U ovom vodiču s uputama proći ćemo kroz postupak stvaranja obrasca pomoću HTML-a, JavaScripta/jQueryja koji provjerava veličinu datoteke dok se učitava. Prednost ove provjere je u tome što možemo ograničiti korisnike da učitaju samo određenu veličinu datoteka i pobrinuti se da strogo slijede naše zahtjeve. Ako je datoteka pogrešne veličine, možemo poslati poruku korisniku bez učitavanja datoteke na poslužitelj što štedi dragocjeno vrijeme.
Izradi web stranicu
Prvo ćemo izraditi jednostavnu HTML web stranicu:
DOCTYPE html >
< html >
< glava >
< titula >
Provjera valjanosti datoteka veličina dok učitavanje pomoću JavaScripta / jQuery
titula >
glava >
< tijelo stil = 'padding-top: 10px; text-align:center;' >
< str > Učitaj a datoteka str >
< ulazni iskaznica = 'datoteka' tip = 'datoteka' stil = 'padding-left: 95px;' />
< br >< br >
< dugme na klik = 'sizeValidation()' > Učitaj dugme >
tijelo >
html >
Razumijevanje koda:
U tijelu web-stranice jednostavno smo upotrijebili a ,
i a
The
Definirajte JavaScript funkciju sizeValidation().
Sada napišimo JavaScript kod koji definira veličinaValidation() funkcija.
< skripta >
funkcija provjera veličine ( ) {
var input = document.getElementById ( 'datoteka' ) ;
bio je datoteka = ulazne.datoteke;
ako ( datoteka.duljina== 0 ) {
uzbuna ( 'Niste odabrali niti jednu datoteku' ) ;
povratak lažno ;
}
var fileSize = Math.round ( ( datoteka [ 0 ] .veličina / 1024 ) ) ;
ako ( veličina datoteke < = 5 * 1024 ) {
uzbuna ( 'Učitano' ) ;
} drugo {
uzbuna (
'Greška! Datoteka je prevelika' ) ;
}
}
skripta >
Razumijevanje koda:
Unutar tijela veličinaValidation() funkciju prvo dobivamo oznaku , a zatim koristimo var file = inputElement.files; kako bismo mogli pristupiti datoteci koja se učitava. Zatim provjeravamo je li datoteka učitana, ako nije, prikazat ćemo poruku o pogrešci i izaći iz funkcije vraćanjem false.
Zatim koristimo malo matematike da odredimo veličinu datoteke. Ako je datoteka odgovarajuće veličine, tj. 5 MB (u ovom slučaju), ona se učitava.
U protivnom će se prikazati skočni prozor s porukom o pogrešci.
Zaključak
Iako je provjera valjanosti na strani klijenta mnogo učinkovitija, još uvijek nije zamjena za provjeru valjanosti na strani poslužitelja i u većini slučajeva može se zaobići. Uvijek je najbolja praksa implementirati provjeru valjanosti i na poslužitelju i na strani klijenta kako biste osigurali učinkovitost i točnost svoje aplikacije.