Andmete valideerimine on iga veebirakenduse oluline osa, kuna see aitab tagada, et üleslaaditavad andmed vastavad teatud arendajate kehtestatud nõuetele. Andmeid saab valideerida nii serveri kui ka kliendi poolel, kuid kliendipoolne valideerimine säästab sageli kasutajate aega ning annab parema ja sujuvama kasutuskogemuse. Kliendipoolset andmete valideerimist saab teha lihtsalt ja see võtab palju vähem aega.
Selles juhendis käsitleme vormi loomise protsessi HTML-i, JavaScripti/jQuery abil, mis kinnitab faili suuruse selle üleslaadimisel. Selle valideerimise eeliseks on see, et saame piirata kasutajate üleslaadimist ainult teatud suurusega failide üleslaadimisel ja tagada, et nad järgivad rangelt meie nõudeid. Kui fail on vale suurusega, saame kasutajale sõnumi saata ilma faili serverisse üles laadimata, mis säästab väärtuslikku aega.
Loo veebileht
Esiteks loome lihtsa HTML-i veebilehe:
DOCTYPE html >
< html >
< pea >
< pealkiri >
Valideerimine faili suurus samal ajal üleslaadimine JavaScripti abil / jQuery
pealkiri >
pea >
< keha stiilis = 'padding-top: 10px; text-align:center;' >
< lk > Laadi üles a faili lk >
< sisend id = 'fail' tüüp = 'fail' stiilis = 'padding-left: 95px;' />
< br >< br >
< nuppu onclick = 'sizeValidation()' > Laadi üles nuppu >
keha >
html >
Koodi mõistmine:
Veebilehe põhiosas oleme lihtsalt kasutanud a ,
ja a
The
Määratlege JavaScripti sizeValidation() funktsioon
Nüüd kirjutame JavaScripti koodi, mis määratleb sizeValidation() funktsiooni.
< stsenaarium >
funktsiooni suuruse kinnitamine ( ) {
var input = document.getElementById ( 'fail' ) ;
oli faili = sisend.failid;
kui ( file.length== 0 ) {
hoiatus ( 'Faili pole valitud' ) ;
tagasi vale ;
}
var fileSize = Math.round ( ( faili [ 0 ] .suurus / 1024 ) ) ;
kui ( faili suurus < = 5 * 1024 ) {
hoiatus ( 'Üleslaaditud' ) ;
} muidu {
hoiatus (
'Viga! Fail on liiga suur' ) ;
}
}
stsenaarium >
Koodi mõistmine:
Keha sees sizeValidation() funktsiooni saame esmalt märgendi ja seejärel kasutame var fail = inputElement.files; rida, et saaksime juurdepääsu üleslaaditavale failile. Seejärel kontrollime, kas fail on üles laaditud, kui mitte, siis kuvame veateate ja väljume funktsioonist, tagastades false.
Seejärel kasutame faili suuruse määramiseks matemaatikat. Kui fail on sobiva suurusega, st 5 MB (antud juhul), laaditakse see üles.
Vastasel juhul kuvatakse tõrketeadet sisaldav hüpikaken.
Järeldus
Kuigi kliendipoolne valideerimine on palju tõhusam, ei asenda see siiski serveripoolset valideerimist ja sellest saab enamikul juhtudel mööda hiilida. Alati on parim tava rakendada nii serveri- kui ka kliendipoolne valideerimine, et saaksite tagada oma rakenduse tõhususe ja täpsuse.