Ověření dat je nezbytnou součástí jakékoli webové aplikace, protože pomáhá zajistit, aby nahrávaná data vyhovovala určitým požadavkům kladeným vývojáři. Data lze ověřovat jak na straně serveru, tak na straně klienta, ale ověřování na straně klienta často šetří čas uživatelů a přináší hezčí a plynulejší uživatelský zážitek. Ověření dat na straně klienta lze provést snadno a zabere mnohem méně času.
V tomto návodu si projdeme proces vytváření formuláře pomocí HTML, JavaScript/jQuery, který ověřuje velikost souboru při jeho nahrávání. Výhodou tohoto ověření je, že můžeme omezit uživatele na nahrávání pouze určité velikosti souborů a zajistit, aby přísně dodržovali naše požadavky. Pokud má soubor špatnou velikost, můžeme uživateli vyžádat zprávu, aniž bychom soubor nahráli na server, což šetří drahocenný čas.
Vytvořit webovou stránku
Nejprve vytvoříme jednoduchou HTML webovou stránku:
DOCTYPE html >
< html >
< hlava >
< titul >
Validace soubor velikost zatímco nahrávání pomocí JavaScriptu / jQuery
titul >
hlava >
< tělo styl = 'padding-top: 10px; text-align:center;' >
< p > Nahrát a soubor p >
< vstup id = 'soubor' typ = 'soubor' styl = 'padding-left: 95px;' />
< br < br >
< knoflík při kliknutí = 'sizeValidation()' > nahrát knoflík >
tělo >
html >
Porozumění kodexu:
V těle webové stránky jsme jednoduše použili a ,
a a
The
Definujte funkci sizeValidation() JavaScriptu
Nyní napíšeme kód JavaScript, který definuje sizeValidation() funkce.
< skript >
funkce velikostValidace ( ) {
var input = document.getElementById ( 'soubor' ) ;
byl soubor = vstup.soubory;
-li ( file.length== 0 ) {
upozornění ( 'Není zvolený žádný soubor' ) ;
vrátit se Nepravdivé ;
}
var fileSize = Math.round ( ( soubor [ 0 ] .velikost / 1024 ) ) ;
-li ( velikost souboru < = 5 * 1024 ) {
upozornění ( 'Nahráno' ) ;
} jiný {
upozornění (
'Chyba! Soubor je příliš velký' ) ;
}
}
skript >
Porozumění kodexu:
Uvnitř těla sizeValidation() nejprve získáme značku a poté použijeme var soubor = inputElement.files; řádek, abychom mohli získat přístup k nahrávanému souboru. Poté zkontrolujeme, zda byl soubor nahrán, pokud ne, zobrazí se chybové hlášení a opustíme funkci vrácením false.
K určení velikosti souboru pak použijeme nějakou matematiku. Pokud má soubor vhodnou velikost, tj. 5 MB (v tomto případě), je nahrán.
V opačném případě se zobrazí vyskakovací okno s chybovou zprávou.
Závěr
I když je ověřování na straně klienta mnohem efektivnější, stále nenahrazuje ověřování na straně serveru a ve většině případů je lze obejít. Vždy je nejlepším postupem implementovat ověření na straně serveru i klienta, abyste mohli zajistit efektivitu i přesnost své aplikace.