Един от най -важните моменти в уеб разработката, който понякога се пренебрегва или не му се обръща необходимото внимание, е валидиране на формуляр а от полетата, които ги съдържат, тези валидации варират от какви стойности могат да приемат, дължината им до факта дали са необходими или не.
Тези валидации на от страна на клиента в миналото те са били извършвани от Javascript изграждане на тромави функции за валидиране на няколко полета и получаване на резултати, които не винаги са били най -оптимални, беше избрано и за валидиране на от страна на сървъра но това не даде на потребителя приятелско изживяване, тъй като първо трябваше да обработим данните и да изчакаме отговора от сървъра, за да проверим дали всички наши данни са верни.
След известно време, когато сте работили с него спретнато Javascript За да извършват всякакви операции от страна на клиента, рамките изглежда улесняват нещата, сред тях една от най -известните: jQuery; С предварително определена структура и по -чист и по -оптимален начин на извършване на нещата беше възможно да се изоставят всички лоши практики и да се даде на разработчика много по -пълен инструмент за постигане на тези операции, включително валидиране.
Но въпреки това jQuery улесни много операции от страна на клиента, все още не беше разработено нещо, което да атакува директно въпроса за валидирането, поради което приставката на Bootstrap Validator който използва всички предимства на jQuery и рамката на HTML5 Y CSS3, Bootstrap.
1. Bootstrap Validator
Bootstrap Validator е плъгин, който се базира на jQuery Y Bootstrap, позволява да се валидират формулярите, както и елементите в него с просто включване на библиотеките с плъгини и използването на неговите мощни, но прости API, без да забравяме всички характеристики, които притежава, нека да видим някои от тях:
- Интеграция с шрифтове и стилове Bootstrap.
- Предварително определени валидации на полета, които включват: дължина на съдържанието, дати, кредитни карти, телефони, имейл и др.
- Персонализирани валидации за полета.
- Възможност за добавяне на множество валидации на поле.
- Възможност за показване на икона за обратна връзка според резултата от валидирането.
- Възможност за използване на съобщения в HTML според резултата от валидирането.
Както видяхме, тези характеристики го правят вариант номер едно, който трябва да се вземе предвид при внедряването на валидирането в нашите проекти.
Какво ни трябва, за да го използваме?За да може да се използва Bootstrap Validator трябва да включим jQuery за предпочитане в последната му версия, Bootstrap от вашата версия 3.x и файловете .css Y .js от книжарницата. Освен това ще трябва да имаме инсталация на уеб сървър като Wamp ако работим по Windows или Лампа в Linux.
2. Валидатори
Преди да влезете в практическата част на този урок, важно е да знаете някои от най -важните валидатори, които той използва. Bootstrap Validator за обработката на валидации във формулярите, нека видим:
base64Валидира низ от 64 кодирани символа.
междуПроверете дали стойността на полето е строго между две дадени числа или не.
кредитна картаПотвърдете номера на кредитна карта.
датаПотвърдете дата според определени опции, сред които се открояват форматът, максимална, минимална дата и дори чрез разделител.
цифриВръща true или true, ако стойността съдържа само числа.
имейл адресКакто подсказва името му, той потвърждава имейл адрес.
regexpПотвърждава дали дадената стойност съвпада или отговаря на регулярен израз на Javascript.
Това е само малка извадка от пълния репертоар от валидатори, които имаме Bootstrap ValidatorЗа пълния списък на валидаторите можем да влезем тук и да проверим този, който най -добре отговаря на нашите нужди:
3. Форма за влизане
Един от най -важните аспекти на всеки текущ уебсайт е форма за влизане, където нашите потребители могат да влязат с потребителското си име и парола на нашата страница и да се насладят на допълнителни предимства при влизане.
Bootstrap Validator ни позволява да потвърдим тези две полета с няколко прости реда код, допълнително Bootstrap ни позволява да му придадем допълнителен щрих, като ни позволява да приложим модален прозорец по прост начин, като по този начин изграждаме формуляр за вход, който ще изглежда професионално и приятен за окото на потребителя.
Тъй като няма да правим никакви промени в изходния код на някой от гореспоменатите файлове, ще ги включим от съответните им CDN, първо ще включим файловете .css толкова много от Boostrap като Bootstrap Validator:
Сега ще включим файловете .js и за да имаме много по -чиста структура, ще отделим кода на нашите валидации във файл, наречен validator.js:
Тогава ще използваме предимствата на Bootstrap за изграждане на нашия модален прозорец, който само чрез прилагане на необходимите класове към елементите, които го съставят, се прилага желаната функционалност:
форма за влизане×Нека да видим как изглежда нашият пример досега, когато го стартираме в браузъра:Влизам
Потребителско имеПаролаВлизам
Нашият модален прозорец вече работи, заедно с нашата форма, сега трябва само да включим проверките с Bootstrap Validator, за това ще инициализираме a документ.готов в нашия файл validator.js и в рамките на това ще наречем метода boostrapValidator ():
$ ('# loginForm'). bootstrapValidator ({съобщение: 'Тази стойност не е валидна', feedbackIcons: {валидно: 'glyphicon glyphicon-ok', невалидно: 'glyphicon glyphicon-remove', валидиращо: 'glyphicon glyphicon-refresh' }, полета: {потребител: {валидатори: {notEmpty: {съобщение: 'Изисква се потребителско име'}}}, парола: {валидатори: {notEmpty: {съобщение: 'Паролата е необходима'}}}}}); Първото нещо, което трябва да забележим в този код, е използването на селектора за инициализиране на метода, в този случай използваме идентификатора на формата, която се нарича форма за влизане, това, за да преминете през DOM дърво и стигнете до елементите под него в йерархията. След това дефинираме общо съобщение и иконите за обратна връзка, за да придадем визуална докосване на нашата форма в случай на успех или грешка при валидирането.
Най -накрая имаме своите валидации и с един поглед можем да видим, че това е нещо изключително четимо и с несравнима простота, посочваме името на полетата на нашите форми и в този пример ще използваме единична проверка, която ще бъде тази на задължително поле, но както коментирахме, те могат да бъдат повече от едно на поле.
Нека видим на следното изображение как изглежда нашата форма, когато се опитваме да изпратим информацията, без да сме попълнили полетата:
Начинът, по който виждаме, че нашите валидации работят и докато информацията не бъде въведена в полетата, формулярът няма да изпълни Изпращане Тъй като бутонът е деактивиран по подразбиране, нека видим на следващото изображение как изглежда нашата форма, когато въведем необходимите данни и съответно се променят иконите за обратна връзка:
За няколко минути успяхме да изградим формуляр за вход със съответните валидации от страна на клиента, благодарение на Bootstrap Validator.
4. Формуляр за регистрация
Предишният случай е прост и доста полезен, но не е единственият, присъстващ в разработките, има регистрационни формуляри, които съдържат много повече полета, а ограниченията относно информацията, която трябва да се въведе, са различни.
Това в миналото представляваше проблем, тъй като в зависимост от броя на полетата трябваше да се извършва брояч и да се валидира поле по поле и когато този брояч достигна определен брой, това означаваше, че няма грешки, без това да се забравят отделните валидации на всяко поле, като формати за дата, които ще приемат само числа или дори дължината на полето.
С Boostrap Validator и неговите предварително дефинирани валидатори ни помагат в тази задача по прост и бърз начин, нека видим:
Първо ще включим файловете .css Y .js които използвахме в предишния пример, допълнително ще включим някои библиотеки, за да можем да използваме избор на дата и час на Boostrap:
След като това е направено, ние изграждаме нашата форма и даваме на всяко поле подходящо име:
Нека да видим как изглежда тази форма в нашия браузър:Формуляр за регистрация
ИменаФамилни именаелектронна пощаПаролаДата на раждане*****Мъжки полЖенскиТелефонМобилен телефонНастаняване
Преди да преминем към валидирането е важно да поставим нашите избор на дата и час за това трябва само да включим следните редове код в нашия файл validator.js и му дайте идентификационния номер, който нашето поле има под формата:
$ (function () {$ ('# datetimepicker'). datetimepicker ({pickTime: false});}); Нека да видим как изглежда този плъгин:
Както видяхме, формулярът има смесени полета, включително текст, полета за парола, избор на дата и дори бутони за избор, но това не е проблем за Bootstrap Validator, ще използваме същия наш файл validator.js за валидиране просто трябва да извършим нов екземпляр на метода boostrapValidator с идентификационния номер на новата форма и там включва същата:
$ ('# registrationForm'). bootstrapValidator ({feedbackIcons: {валидно: 'glyphicon glyphicon-ok', невалидно: 'glyphicon glyphicon-remove', валидиращо: 'glyphicon glyphicon-refresh'}, полета: {name: {validators: {notEmpty: {message: 'Името е задължително'}}}, фамилно име: {validators: {notEmpty: {message: 'Фамилията е задължително'}}}, имейл: {validators: {notEmpty: {message: ' Имейлът е задължителен и не може да бъде празен '}, emailAddress: {message:' Имейлът не е валиден '}}}, парола: {validators: {notEmpty: {message:' Паролата е задължителна и не може да бъде празна '}, stringLength: {min: 8, message: 'Паролата трябва да съдържа поне 8 знака'}}}, datetimepicker: {validators: {notEmpty: {message: 'Датата на раждане е задължителна и не може да бъде празна'}, date: {format: 'YYYY-MM-DD', message: 'Датата на раждане не е валидна'}}}, *****: {validators: {notEmpty: {message: '*****се изисква '}}}, телефон: {message:' Телефонът или не е валиден “, валидатори: {notEmpty: {съобщение:„ Телефонът е задължителен и не може да бъде празен “}, regexp: {regexp: / [0-9] + $ /, съобщение:„ Телефонът може да бъде само съдържат номера '}}}, telefono_cel: {съобщение:' Телефонът не е валиден ', валидатори: {regexp: {regexp: / [0-9] + $ /, съобщение:' Телефонът може да съдържа само номера '} }},}}); Можем да видим, че за първите две валидации те са подобни на предишния пример, но когато намерим полето за имейл, виждаме, че то има валидиране на задължителното поле и допълнително с валидатора имейл адрес Проверяваме дали е валиден имейл, нека видим как се държи това валидиране:
С бележка на дата Нямаме проблеми с въвеждането на дати, но ако искаме да получим това по възможно най -чистия начин, можем да потвърдим формата, както можем да видим в следното валидиране, където посочваме, че форматът трябва да бъде ГГГГ-ММ-ДД какво важи за:
Можем дори да потвърдим с колко знака може да бъде паролата stringLength и опцията за мин:
За да завършим и демонстрираме силата на този плъгин, ще проверим телефона, бихме могли да използваме валидатора на цифри, но в този случай ще използваме нещо по -сложно като регулярен израз и най -доброто от всичко е, че вече имаме валидатор за че: regexp, Нека да видим как работи в нашата форма:
След като вече проверихме дали всички наши валидации работят правилно, ние ще коригираме цялата информация в нашата форма и ще видим как изглежда с подходящата информация:
С това завършваме този урок, в който се научихме да използваме валидирането на Boostrap Validator, мощен плъгин, който не се нуждае от инсталация или конфигуриране и който ни позволява да потвърждаваме нашите формуляри бързо и лесно с няколко прости реда код.
