Duomenų patvirtinimas yra esminė bet kurios žiniatinklio programos dalis, nes ji padeda užtikrinti, kad įkeliami duomenys atitiktų tam tikrus kūrėjų keliamus reikalavimus. Duomenys gali būti patvirtinti tiek serverio, tiek kliento pusėje, tačiau kliento pusės patvirtinimas dažnai sutaupo vartotojų laiką ir suteikia malonesnę bei sklandesnę vartotojo patirtį. Kliento pusės duomenų patvirtinimas gali būti atliekamas lengvai ir užima daug mažiau laiko.
Šiame vadove apžvelgsime formos kūrimo procesą naudodami HTML, JavaScript / jQuery, kuris patvirtina failo dydį, kai jis įkeliamas. Šio patvirtinimo pranašumas yra tas, kad galime apriboti naudotojų galimybę įkelti tik tam tikro dydžio failus ir užtikrinti, kad jie griežtai laikytųsi mūsų reikalavimų. Jei failas yra netinkamo dydžio, galime paprašyti vartotojui išsiųsti pranešimą neįkeldami failo į serverį, o tai sutaupo brangaus laiko.
Sukurti tinklalapį
Pirmiausia sukursime paprastą HTML tinklalapį:
DOCTYPE html >
< html >
< galva >
< titulą >
Patvirtinimas failą dydis kol įkėlimas naudojant JavaScript / jQuery
titulą >
galva >
< kūnas stilius = 'padding-top: 10px; text-align:center;' >
< p > Įkelti a failą p >
< įvestis id = 'failas' tipo = 'failas' stilius = 'padding-left: 95px;' />
< br >< br >
< mygtuką paspaudus = 'sizeValidation()' > Įkelti mygtuką >
kūnas >
html >
Kodekso supratimas:
Tinklalapio tekste mes tiesiog panaudojome a , <įvestis> ,
ir a
The
Apibrėžkite JavaScript sizeValidation() funkciją
Dabar parašykime JavaScript kodą, kuris apibrėžia sizeValidation() funkcija.
< scenarijus >
funkcija dydis Patvirtinimas ( ) {
var input = document.getElementById ( 'failas' ) ;
buvo failą = įvestis.failai;
jeigu ( file.length== 0 ) {
budrus ( 'Nepasirinktas joks failas' ) ;
grąžinti klaidinga ;
}
var fileSize = Math.round ( ( failą [ 0 ] .dydis / 1024 ) ) ;
jeigu ( failo dydis < = 5 * 1024 ) {
budrus ( 'Įkelta' ) ;
} Kitas {
budrus (
'Klaida! Failas per didelis' ) ;
}
}
scenarijus >
Kodekso supratimas:
Korpuso viduje sizeValidation() funkciją, pirmiausia gauname žymą ir tada naudojame var failas = inputElement.files; eilutę, kad galėtume pasiekti įkeliamą failą. Tada patikriname, ar failas buvo įkeltas, jei ne, paraginsime klaidos pranešimą ir išeisime iš funkcijos, grąžindami false.
Tada mes naudojame tam tikrą matematiką, kad nustatytų failo dydį. Jei failas yra tinkamo dydžio, ty 5 MB (šiuo atveju), jis įkeliamas.
Kitu atveju bus rodomas iššokantis langas su klaidos pranešimu.
Išvada
Nors kliento pusės patvirtinimas yra daug efektyvesnis, jis vis tiek nepakeičia serverio patvirtinimo ir daugeliu atvejų jį galima apeiti. Visada geriausia praktika įdiegti tiek serverio, tiek kliento pusės patvirtinimą, kad galėtumėte užtikrinti programos efektyvumą ir tikslumą.