Валидација података је суштински део сваке веб апликације јер помаже да се осигура да подаци који се отпремају одговарају одређеним захтевима које намећу програмери. Подаци се могу потврдити и на страни сервера и на страни клијента, али валидација на страни клијента често штеди време корисника и показује лепше и лакше корисничко искуство. Валидација података на страни клијента може се обавити лако и одузима много мање времена.
У овом водичу са упутствима проћи ћемо кроз процес креирања обрасца користећи ХТМЛ, ЈаваСцрипт/јКуери који потврђује величину датотеке док се отпрема. Предност ове провере је што можемо ограничити кориснике да отпремају само одређену величину датотека и да се уверимо да стриктно поштују наше захтеве. Ако је датотека погрешне величине, можемо затражити поруку кориснику без отпремања датотеке на сервер што штеди драгоцено време.
Креирајте веб страницу
Прво ћемо направити једноставну ХТМЛ веб страницу:
ДОЦТИПЕ хтмл >
< хтмл >
< глава >
< наслов >
Валидација оф фајл величина док отпремање помоћу ЈаваСцрипт-а / јКуери
наслов >
глава >
< тело стил = 'паддинг-топ: 10пк; тект-алигн:центер;' >
< стр > Отпремите а фајл стр >
< улазни ид = 'фајл' тип = 'фајл' стил = 'паддинг-лефт: 95пк;' />
< бр >< бр >
< дугме онцлицк = 'сизеВалидатион()' > Отпремити дугме >
тело >
хтмл >
Разумевање кода:
У телу веб странице, једноставно смо користили а <п> , <инпут> , <бр> и а <дугме> таг. Тхе <инпут> ознака се користи тако да корисник може да одабере датотеку и затим је отпреми помоћу дугмета приказаног помоћу <дугме> таг.
Тхе <дугме> таг позива сизеВалидатион() функција на догађај клика који затим одређује величину датотеке и штампа одговарајуће упозорење у зависности од величине датотеке.
Дефинишите функцију ЈаваСцрипт сизеВалидатион().
Хајде сада да напишемо ЈаваСцрипт код који дефинише сизеВалидатион() функција.
< скрипта >
функција сизеВалидатион ( ) {
вар инпут = доцумент.гетЕлементБиИд ( 'фајл' ) ;
био фајл = инпут.филес;
ако ( филе.ленгтх== 0 ) {
узбуна ( 'Фајл није одабран' ) ;
повратак лажно ;
}
вар филеСизе = Матх.роунд ( ( фајл [ 0 ] .величина / 1024 ) ) ;
ако ( величина фајла < = 5 * 1024 ) {
узбуна ( „Отпремљено“ ) ;
} друго {
узбуна (
„Грешка! Датотека је превелика“ ) ;
}
}
скрипта >
Разумевање кода:
Унутар тела сизеВалидатион() функцију прво добијамо ознаку <инпут ид=”филе” /> а затим користимо вар филе = инпутЕлемент.филес; линију како бисмо могли да приступимо датотеци која се отпрема. Затим проверавамо да ли је датотека отпремљена, ако није, затражићемо поруку о грешци и изаћи из функције враћањем фалсе.
Затим користимо математику да одредимо величину датотеке. Ако је датотека одговарајуће величине, тј. 5 МБ (у овом случају), она се отпрема.
У супротном, појављује се искачући прозор који садржи поруку о грешци.
Закључак
Иако је валидација на страни клијента много ефикаснија, она још увек није замена за проверу на страни сервера и може се заобићи у већини случајева. Увек је најбоља пракса имплементирати валидацију на страни сервера и клијента тако да можете осигурати и ефикасност и тачност ваше апликације.