Validarea datelor este o parte esențială a oricărei aplicații web, deoarece ajută la asigurarea faptului că datele încărcate îndeplinesc anumite cerințe impuse de dezvoltatori. Datele pot fi validate atât pe partea serverului, cât și pe partea clientului, dar validarea pe partea clientului economisește adesea timp utilizatorilor și se dovedește a fi o experiență de utilizator mai plăcută și mai fluidă. Validarea datelor la nivelul clientului se poate face cu ușurință și consumă mult mai puțin timp.
În acest ghid de utilizare, vom parcurge procesul de creare a unui formular folosind HTML, JavaScript/jQuery, care validează fișierul cu dimensiunea pe măsură ce este încărcat. Avantajul acestei validări este că putem restricționa utilizatorii să încarce doar o anumită dimensiune de fișiere și să ne asigurăm că respectă cu strictețe cerințele noastre. Dacă fișierul are dimensiunea greșită, putem solicita un mesaj utilizatorului fără a încărca fișierul pe server, ceea ce economisește timp prețios.
Creați o pagină web
Mai întâi, vom crea o pagină web HTML simplă:
DOCTYPE html >
< html >
< cap >
< titlu >
Validarea fişier mărimea in timp ce încărcarea utilizând JavaScript / jQuery
titlu >
cap >
< corp stil = 'padding-top: 10px; text-align:center;' >
< p > Încărcați a fişier p >
< intrare id = 'fişier' tip = 'fişier' stil = 'padding-left: 95px;' />
< br >< br >
< buton onclick = „sizeValidation()” > Încărcați buton >
corp >
html >
Înțelegerea codului:
În corpul paginii web, am folosit pur și simplu a , ,
si a
The
Definiți funcția JavaScript sizeValidation().
Acum să scriem codul JavaScript care definește sizeValidation() funcţie.
< scenariu >
funcţie Validare dimensiune ( ) {
var input = document.getElementById ( 'fişier' ) ;
a fost fişier = input.files;
dacă ( file.length== 0 ) {
alerta ( 'Niciun fișier ales' ) ;
întoarcere fals ;
}
var fileSize = Math.round ( ( fişier [ 0 ] .mărimea / 1024 ) ) ;
dacă ( mărime fișier < = 5 * 1024 ) {
alerta ( „Încărcat” ) ;
} altfel {
alerta (
„Eroare! Fișierul prea mare” ) ;
}
}
scenariu >
Înțelegerea codului:
În interiorul corpului sizeValidation() funcția obținem mai întâi eticheta