Валидирането на данни е съществена част от всяко уеб приложение, тъй като помага да се гарантира, че данните, които се качват, отговарят на определени изисквания, наложени от разработчиците. Данните могат да бъдат валидирани както от страна на сървъра, така и от страна на клиента, но валидирането от страна на клиента често спестява време на потребителите и се оказва по-приятно и по-плавно потребителско изживяване. Валидирането на данни от страна на клиента може да се извърши лесно и отнема много по-малко време.
В това ръководство с инструкции ще преминем през процеса на създаване на формуляр с помощта на HTML, JavaScript/jQuery, който валидира размера на файла, докато се качва. Ползата от това валидиране е, че можем да ограничим потребителите да качват само определен размер файлове и да се уверим, че те спазват стриктно нашите изисквания. Ако файлът е с грешен размер, можем да изпратим съобщение до потребителя, без да качваме файла на сървъра, което спестява ценно време.
Създаване на уеб страница
Първо, ще създадем проста HTML уеб страница:
DOCTYPE html >
< html >
< глава >
< заглавие >
Валидиране на файл размер докато качване с помощта на JavaScript / jQuery
заглавие >
глава >
< тяло стил = 'padding-top: 10px; text-align:center;' >
< стр > Качете a файл стр >
< вход документ за самоличност = 'файл' Тип = 'файл' стил = 'padding-left: 95px;' />
< бр >< бр >
< бутон onclick = 'sizeValidation()' > Качване бутон >
тяло >
html >
Разбиране на кода:
В основния текст на уеб страницата ние просто използвахме a , <вход> ,
и а <бутон> етикет. The <вход> се използва, така че потребителят да може да избере файл и след това да го качи с помощта на бутона, показан с помощта на <бутон> етикет.
The <бутон> етикетът извиква sizeValidation() функция при кликване, която след това определя размера на файла и отпечатва подходящо предупреждение в зависимост от размера на файла.
Дефинирайте функцията sizeValidation() на JavaScript
Сега нека напишем JavaScript кода, който дефинира sizeValidation() функция.
< сценарий >
функция sizeValidation ( ) {
var input = document.getElementById ( 'файл' ) ;
беше файл = input.files;
ако ( file.length== 0 ) {
тревога ( 'Няма избран файл' ) ;
връщане невярно ;
}
var fileSize = Math.round ( ( файл [ 0 ] .размер / 1024 ) ) ;
ако ( размер на файла < = 5 * 1024 ) {
тревога ( „Качен“ ) ;
} друго {
тревога (
'Грешка! Файлът е твърде голям' ) ;
}
}
сценарий >
Разбиране на кода:
Вътре в тялото на sizeValidation() функция първо получаваме тага и след това използваме var file = inputElement.files; линия, за да можем да получим достъп до файла, който се качва. След това проверяваме дали даден файл е качен, ако не, ще изведем съобщение за грешка и ще излезем от функцията, като върнем false.
След това използваме малко математика, за да определим размера на файла. Ако файлът е с подходящ размер, т.е. 5 MB (в този случай), той се качва.
В противен случай се показва изскачащ прозорец, съдържащ съобщение за грешка.
Заключение
Въпреки че валидирането от страна на клиента е много по-ефективно, то все още не е заместител на валидирането от страна на сървъра и в повечето случаи може да бъде заобиколено. Винаги е най-добрата практика да внедрите както сървърно, така и клиентско валидиране, така че да можете да гарантирате както ефективност, така и точност на вашето приложение.