Једна од најважнијих тачака у развоју веба која се понекад занемарује или јој се не посвећује потребна пажња је валидација обрасца а поља која их обухватају, ове провере се крећу од оних вредности које могу прихватити, њихове дужине до чињенице да ли су потребне или нису.
Ове потврде страна клијента у прошлости су их спроводили Јавасцрипт изградњом гломазних функција за валидацију неколико поља и добијање резултата који нису увек били најоптималнији, такође је изабрано да потврди на страни сервера али то није дало кориснику пријатно искуство јер смо прво морали да обрадимо податке и сачекамо одговор сервера да потврди да су сви наши подаци тачни.
Након неког времена уредног рада са Јавасцрипт За извођење свих врста операција на страни клијента, чини се да оквири олакшавају ствари, међу њима и један од најпознатијих: јКуери; Са унапред дефинисаном структуром и чистијим и оптималнијим начином обављања послова, било је могуће оставити иза себе све лоше праксе и дати програмеру много потпунији алат за постизање ових операција, укључујући и валидације.
Али иако јКуери олакшао многе операције на страни клијента, још није развијено нешто што би директно нападало питање валидације, зато је додатак Боотстрап Валидатор који користи све предности од јКуери и оквир ХТМЛ5 И ЦСС3, Боотстрап.
1. Боотстрап Валидатор
Боотстрап Валидатор је додатак на коме се заснива јКуери И Боотстрап, омогућава проверу облика, као и елемената у њему једноставним укључивањем библиотека додатака и употребом његових моћних, али једноставних АПИ, ово без заборављања свих карактеристика које има, погледајмо неке од ових:
- Интеграција са фонтовима и стиловима Боотстрап.
- Унапред дефинисана валидација поља која укључује: дужину садржаја, датуме, кредитне картице, телефоне, е -пошту, између осталог.
- Прилагођена валидација поља.
- Могућност додавања више потврда по пољу.
- Могућност приказа иконе повратне информације према резултату валидације.
- Могућност коришћења порука у ХТМЛ према резултату валидације.
Као што смо могли видети, ове карактеристике чине опцију број један коју треба размотрити за имплементацију валидација у нашим пројектима.
Шта нам је потребно да га користимо?Да бисте могли да користите Боотстрап Валидатор морамо укључити јКуери пожељно у најновијој верзији, Боотстрап из ваше верзије 3.к и датотеке .цсс И .јс из књижаре. Поред тога, мораћемо да имамо инсталацију веб сервера попут Вамп ако радимо на томе Виндовс или Ламп у Линук.
2. Валидаторс
Пре него што пређете у практични део овог водича, важно је знати неке од најважнијих валидатора које користи. Боотстрап Валидатор за руковање валидацијама унутар образаца, да видимо:
басе64Валидира низ знакова кодираних у бази-64.
измеђуПроверите да ли је вредност поља строго између два наведена броја или не.
кредитна картицаПотврдите број кредитне картице.
датумПотврдите датум према одређеним опцијама међу којима се истичу формат, максимални, минимални датум, па чак и сепаратором.
цифреВраћа труе или труе ако вредност садржи само бројеве.
емаил адресаКао што му назив говори, потврђује е -адресу.
регекпПроверава да ли се дата вредност подудара или одговара регуларном изразу од Јавасцрипт.
Ово је само мали узорак комплетног репертоара валидатора који имамо Боотстрап ВалидаторЗа потпуну листу валидатора, можемо ући овде и проверити онај који најбоље одговара нашим потребама:
3. Формулар за пријављивање
Један од најважнијих аспеката било које тренутне веб странице је формулар за пријављивање, где наши корисници могу ући са својим корисничким именом и лозинком на нашу страницу и уживати у додатним предностима приликом пријављивања.
Боотстрап Валидатор омогућава нам да додатно потврдимо ова два поља са неколико једноставних линија кода Боотстрап омогућава нам да му дамо додатни печат допуштајући нам да на једноставан начин имплементирамо модални прозор, стварајући тако образац за пријаву који ће изгледати професионално и пријатно оку корисника.
Како нећемо мењати изворни код било које од горе наведених датотека, укључићемо их из њихових одговарајућих датотека ЦДН, прво ћемо укључити датотеке .цсс толико од Боострап као Боотстрап Валидатор:
Сада ћемо укључити датотеке .јс и да бисмо имали много чистију структуру, одвојићемо код наших валидација у датотеку под називом валидатор.јс:
Тада ћемо искористити предности Боотстрап за изградњу нашег модалног прозора, који само применом потребних класа на елементе који га чине, примењује жељену функционалност:
формулар за пријављивање×Хајде да видимо како наш пример изгледа до сада када га покренемо у прегледачу:Пријавите се
Корисничко имеЛозинкаПријавите се
Наш модални прозор већ функционише, заједно са обрасцем, сада морамо само да укључимо потврде са Боотстрап Валидатор, за ово ћемо покренути а документ.већ у нашем досијеу валидатор.јс а у оквиру овога ћемо позвати методу боострапВалидатор ():
$ ('# логинФорм'). боотстрапВалидатор ({мессаге: 'Ова вредност није важећа', феедбацкИцонс: {валид: 'глипхицон глипхицон-ок', инвалид: 'глипхицон глипхицон-ремове', валидатинг: 'глипхицон глипхицон-рефресх' }, поља: {усер: {валидаторс: {нотЕмпти: {мессаге: 'Корисничко име је потребно'}}}, лозинка: {валидаторс: {нотЕмпти: {мессаге: 'Пассворд ис рекуиред'}}}}}); Прво што треба да приметимо у овом коду је употреба селектора за иницијализацију методе, у овом случају користимо ИД облика који се назива формулар за пријављивање, ово да прође кроз ДОМ дрво и дођите до ставки испод ње у хијерархији. Затим дефинишемо општу поруку и иконе повратних информација, како бисмо дали визуелни печат нашој форми у случају успеха или грешке у валидацијама.
Коначно имамо своје валидације и како на први поглед можемо видети да је то нешто изузетно читљиво и неупоредиве једноставности, означавамо назив поља наших образаца, а у овом примеру користићемо једну проверу која ће бити обавезно поље, али као што смо коментарисали, може бити више од једног по пољу.
Погледајмо на следећој слици како изгледа наш образац када покушамо да пошаљемо информације а да нисмо попунили поља:
Како видимо да наше валидације функционишу и све док се подаци не унесу у поља, образац неће извршити прихвати Пошто је дугме подразумевано онемогућено, да видимо на следећој слици како изгледа наш образац када унесемо потребне податке, а иконе повратних информација се према томе мењају:
За неколико минута смо успели да направимо образац за пријављивање са одговарајућим потврдама на страни клијента захваљујући томе Боотстрап Валидатор.
4. Образац за регистрацију
Претходни случај је једноставан и прилично користан, али није једини присутан у развоју, постоје регистрациони обрасци који садрже много више поља, а ограничења у погледу података које треба унети су различита.
Ово је у прошлости представљало проблем јер је, овисно о броју поља, требало извести бројач и провјерити поље по поље, а када је тај бројач досегао одређени број, значило је да нема грешака, при чему се не заборављају појединачне провјере свако поље, као што су формати датума, који ће прихватити само бројеве или чак дужину поља.
Витх Боострап Валидатор и његови унапред дефинисани валидатори помажу нам у овом задатку на једноставан и брз начин, да видимо:
Прво ћемо укључити датотеке .цсс И .јс које смо користили у претходном примеру, додатно ћемо укључити неке библиотеке да бисмо могли да користимо датетимепицкер оф Боострап:
Када се то уради, састављамо образац и сваком пољу дајемо одговарајуће име:
Хајде да видимо како овај образац изгледа у нашем прегледачу:Образац за регистрацију
НамесПрезименаЕмаилЛозинкаДатум рођења*****МушкиФемининеТелефонМобилни телефонПријавити
Пре него што пређемо на валидације, важно је да ставимо наше датетимепицкер за ово морамо само да уврстимо следеће редове кода у нашу датотеку валидатор.јс и дајте му ИД који наше поље има у облику:
$ (фунцтион () {$ ('# датетимепицкер'). датетимепицкер ({пицкТиме: фалсе});}); Хајде да видимо како овај додатак изгледа:
Као што смо могли видети, образац има мешовита поља, укључујући текст, поља лозинке, бирач датума, па чак и дугмад за избор, али то није проблем за Боотстрап Валидатор, користићемо нашу исту датотеку валидатор.јс за проверу ваља само извршити нову инстанцу методе боострапВалидатор са ИД -ом новог обрасца и тамо садрже исти:
$ ('# регистратионФорм'). боотстрапВалидатор ({феедбацкИцонс: {валид: 'глипхицон глипхицон-ок', инвалид: 'глипхицон глипхицон-ремове', валидација: 'глипхицон глипхицон-рефресх'}, поља: {наме: {валидаторс: {нотЕмпти: {мессаге: 'Име је потребно'}}}, презиме: {валидаторс: {нотЕмпти: {мессаге: 'Презиме је потребно'}}}, емаил: {валидаторс: {нотЕмпти: {мессаге: ' Имејл је обавезан и не може бити празан '}, емаилАддресс: {мессаге:' Имејл није важећи '}}}, лозинка: {валидаторс: {нотЕмпти: {мессаге:' Лозинка је обавезна и не може бити празна '}, стрингЛенгтх: {мин: 8, мессаге: 'Лозинка мора да садржи најмање 8 знакова'}}}, датумтимепицкер: {валидаторс: {нотЕмпти: {мессаге: 'Датум рођења је обавезан и не може бити празан'}, датум: {формат: 'ИИИИ-ММ-ДД', порука: 'Датум рођења није важећи'}}}, *****: {валидаторс: {нотЕмпти: {мессаге: '*****је обавезан '}}}, телефон: {мессаге:' Телефон или није важећи ', валидаторс: {нотЕмпти: {мессаге:' Телефон је потребан и не може бити празан '}, регекп: {регекп: / [0-9] + $ /, порука:' Телефон може бити само садрже бројеве '}}}, телефоно_цел: {порука:' Телефон није важећи ', валидатори: {регекп: {регекп: / [0-9] + $ /, порука:' Телефон може да садржи само бројеве '} }},}}); Можемо видети да су за прве две валидације сличне претходном примеру, али када пронађемо поље е -поште, видимо да има потврду ваљаног поља и додатно са валидатором емаил адреса Проверавамо да је то важећа е -пошта, да видимо како се ова валидација понаша:
Са берач датуља Немамо проблема с уносом датума, међутим, ако желимо ово примити на што чистији начин, можемо потврдити формат као што видимо у сљедећој провјери, гдје назначујемо да формат треба бити ГГГГ-ММ-ДД шта важи за:
Можемо чак да потврдимо са колико знакова лозинка може да садржи стрингЛенгтх и могућност мин:
Да бисмо довршили и демонстрирали снагу овог додатка, ми ћемо потврдити телефон, могли бисмо користити валидатор цифара, али у овом случају ћемо користити нешто сложеније попут регуларног израза, а најбоље од свега је што већ имамо валидатор за то: регекп, Да видимо како то функционише у нашем облику:
Пошто смо већ тестирали да ли све наше потврде исправно функционишу, исправит ћемо све податке у нашем обрасцу и видјети како то изгледа с одговарајућим подацима:
Овим смо завршили овај водич у којем смо научили да користимо валидације Боострап Валидатор, моћан додатак за који није потребна инсталација или конфигурација и који нам омогућава да брзо и лако потврдимо своје обрасце са неколико једноставних линија кода.
