Валидација је поступак којим се осигурава да су подаци тачни и потпуни.
У примеру из стварног света, претпоставимо да је локација која захтева образац за регистрацију попуњена пре него што добије пуни приступ овој страници. Страница за регистрацију имала би поља за унос корисничког имена, лозинке, ид-а е-поште и тако даље.
Када корисник пошаље образац, обично би се прво извршила валидација пре него што се детаљи пошаљу на сервер. Ова валидација ће покушати да обезбеди у најбољој могућој мери да се детаљи за поља за унос уносе на прави начин.
На пример, имејл адреса увек мора бити у формату Ова адреса е-поште је заштићена од нежељених робота. Поште заштићена је од спам напада, треба омогућити ЈаваСкрипт да бисте је видели. ; ако неко унесе само корисничко име у ид е-поште, тада би идеално било да валидација не успе. Дакле, провера ваљаности врши ове основне провере пре него што се детаљи пошаљу серверу на даљу обраду.
У овом упутству ћете научити-
- Провера облика помоћу ХТМЛ5
- Валидација обрасца помоћу $ дирти, $ валид, $ инвалид, $ пристине
- Валидација обрасца помоћу АнгуларЈС Ауто Валидате
- Повратне информације корисника помоћу Ладда дугмади
Провера облика помоћу ХТМЛ5
Провера ваљаности обрасца је поступак претходне провере ваљаности информација које је корисник унео у веб образац пре него што се пошаљу серверу. Увек је боље потврдити информације на самој страни клијента. То је зато што додаје мање додатних трошкова ако је кориснику морао поново да се пошаље образац ако су унети подаци погрешни.
Погледајмо како се валидација образаца може спровести у ХТМЛ5.
У нашем примеру ћемо кориснику показати један једноставан образац за регистрацију у који корисник треба да унесе детаље као што су корисничко име, лозинка, ид е-поште и старост.
Образац ће имати контроле валидације како би се осигурало да корисник унесе информације на правилан начин.
Event Registration Guru99 Global Event
Објашњење кода:
- За тип уноса текста користимо атрибут „потребан“. То значи да оквир за текст не може бити празан када се образац предаје, а нека врста текста треба да буде присутна у оквиру за текст.
- Следећи тип уноса је лозинка. Пошто је тип уноса означен као лозинка, када корисник унесе било који текст у поље, он ће бити маскиран.
- Будући да је врста уноса наведена као е-пошта, текст у пољу мора одговарати обрасцу Ова адреса е-поште је заштићена од нежељених робота. Поште заштићена је од спам напада, треба омогућити ЈаваСкрипт да бисте је видели. .
- Када је тип уноса означен као број, ако корисник покуша да унесе било који знак помоћу тастатуре или абецеде, неће бити унесен у оквир за текст.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Да бисте видели проверу обрасца на делу, кликните на дугме Пошаљи без уношења било каквих информација на екран.
Након што се кликне на дугме за слање, појавит ће се искачући прозор који приказује грешку провјере ваљаности да поље треба попунити.
Дакле, валидација контроле која је означена као потребна, доводи до тога да се приказује порука о грешци ако корисник не унесе никакву вредност у поље за текст.
Када корисник унесе било коју вредност у контролу лозинке, приметићете симбол '*' који се користи за маскирање унетих знакова.
Унесите онда погрешан ид е-поште и кликните на дугме за слање. Након што се кликне на дугме за слање, појавит ће се искачући прозор који приказује грешку провјере ваљаности да поље мора имати симбол @.
Дакле, валидација контроле која је означена као контрола е-поште довешће до тога да се приказује порука о грешци ако корисник не унесе одговарајући ИД е-поште у поље за текст.
Коначно, када покушате да унесете било који знак у контролу за текст старости, он се неће унети на екран. Контрола ће попунити вредност само када се у њу унесе број.
Валидација обрасца помоћу $ дирти, $ валид, $ инвалид, $ пристине
АнгуларЈС пружа своја додатна својства за валидацију. АнгуларЈС пружа следећа својства за контроле у сврхе провере ваљаности
- $ дирти - Корисник је ступио у интеракцију са контролом
- $ валид - Садржај поља је важећи
- $ инвалид - Садржај поља је неважећи
- $ пристине - Корисник још увек није ступио у интеракцију са контролом
Испод су кораци које треба следити за спровођење кутне валидације.
Корак 1) Користите својство но валидате када пријављујете образац. Ово својство говори ХТМЛ5 да ће проверу ваљаности извршити АнгуларЈС.
Корак 2) Уверите се да образац има одређено име за њега. Разлог за то је што ће се приликом вршења Ангулар валидације користити назив обрасца.
Корак 3) Уверите се да свака контрола такође има одређено име за њу. Разлог за то је што ће се приликом вршења Ангулар валидације користити контролно име.
Корак 4) Користите нг-схов директиву за проверу својстава $ дирти, $ инвалид и $ валид за контроле.
Погледајмо пример који укључује горе поменуте кораке.
У нашем примеру,
Управо ћемо добити једноставно текстуално поље у које корисник треба да унесе име теме у оквир за текст. Ако се то не уради, покренуће се грешка валидације и порука о грешци ће се приказати кориснику.
Event Registration Guru99 Global Event
Објашњење кода:
- Имајте на уму да смо дали име обрасцу „миФорм“. Ово је потребно при приступу контролама на обрасцу за проверу АнгуларЈС.
- Коришћење својства "новалидате" да би се обезбедило да ХТМЛ образац омогућава АнгуларЈС-у да изврши проверу.
- Користимо директиву нг-схов за проверу својства „$ дирти“ и „$ инвалид“. То значи да ће, ако је оквир за текст измењен, вредност својства "$ дирти" бити истинита. Такође, у случају када је вредност оквира за текст нулл, својство „$ инвалид“ ће постати тачно. Дакле, ако су обе особине истините, тада валидација неће успети за контролу. Дакле, ако су обе вредности истините, нг-схов ће такође постати истина, а приказаће се контрола распона са црвеним знаковима.
- У овоме проверавамо својство „$ еррор“ које такође оцењује као тачно јер смо за контролу напоменули да вредност треба унети за контролу. У таквом случају, када у поље за текст нису унети подаци, контрола распона ће приказати текст „Корисничко име је потребно“.
- Ако је контролна вредност текстуалног оквира неваљана, такође желимо да онемогућимо дугме за слање тако да корисник не може да пошаље образац. За контролу користимо својство „нг-дисаблед“ за контролу на основу условне вредности својства „$ дирти“ и „$ инвалид“ контроле.
- У контролеру само постављамо почетну вредност вредности оквира за текст на текст 'АнгуларЈС'. Ово се управо ради да би се поставила нека задата вредност за оквир за текст приликом првог приказивања обрасца. Боље приказује како се валидација одвија за поље текстуалног оквира.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Када се образац првобитно прикаже, оквир за текст приказује вредност „АнгуларЈС“ и омогућено је „дугме за слање“. Чим уклоните текст из контроле, порука о грешци потврде је омогућена, а дугме Субмит је онемогућено.
Горњи снимак екрана приказује две ствари
- Дугме за слање је онемогућено
- У пољу за текст теме нема назива теме. Стога покреће поруку о грешци „Корисничко име је потребно“.
Валидација обрасца помоћу АнгуларЈС Ауто Валидате
У АнгуларЈС постоји могућност аутоматског потврђивања свих контрола на обрасцу без потребе за писањем прилагођеног кода за валидацију. То се може постићи укључивањем прилагођеног модула под називом „јцс-АутоВалидате“.
Када је овај модул на месту, не треба да постављате никакав посебан код да бисте извршили валидацију или приказали поруке о грешци. Све ово обрађује код унутар ЈЦС-АутоВалидате.
Погледајмо једноставан пример како то постићи.
У овом примеру,
Само ћемо добити једноставан образац са контролом оквира за текст који је обавезно поље. Ако ова контрола није попуњена, требало би да се прикаже порука о грешци.
Event Registration Guru99 Event
Објашњење кода:
- Прво, морамо да укључимо скрипту „јцс-ауто-валидате.јс“ која има све функције аутоматске провере ваљаности.
- Морамо осигурати да се сваки елемент, укључујући „див таг“, стави у класу „форм-гроуп“.
- Такође треба осигурати да се сваки елемент (који је ХТМЛ елемент као што је контрола уноса, контрола распона, контрола див и тако даље), као што су контроле уноса, такође постави у класу групе образаца.
- Укључите јцс-аутовалидате у свој АнгуларЈС ЈС модул.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Када покренете свој код, подразумевано ће се приказати горњи образац према ХТМЛ коду.
Ако покушате да пошаљете образац, искочиће порука са поруком: „Ово поље је обавезно“. Све ово ради опција ЈЦС-АутоВалидате.
Повратне информације корисника са Ладда тастерима
Дугмад „ладда“ је посебан оквир направљен за дугмад на врху ЈаваСцрипт-а да би визуелни ефекат имали тастери када се притисну.
Дакле, ако дугме добије атрибут „ладда“ и притисне се, приказаће се ефекат окретања. Такође, за дугме су доступни различити стилови података који пружају додатне визуелне ефекте.
Погледајмо пример како да видимо дугмад „ладда“ на делу. Тек ћемо видети једноставан образац који има дугме за слање. Када се притисне дугме, на њему ће се приказати ефекат окретања.
Event Registration Guru99 Event
Објашњење кода:
- Користимо директиву „нг-субмит“ за позивање функције која се назива „субмит“. Ова функција ће се користити за промену ладда атрибута дугмета за слање.
- Атрибут ладда је посебан атрибут оквира ладда. Управо овај атрибут додаје ефекат окретања контроли. Постављамо вредност атрибута ладда на променљиву која подноси.
- Својство стила података је поново додатни атрибут који нуди ладда фрамеворк, који само додаје другачији визуелни ефекат дугмету за слање.
- Модул 'АнгуларЈС-ладда' треба додати апликацији АнгуларЈС.ЈС да би ладда фрамеворк могао да ради.
- У почетку дефинишемо и постављамо вредност променљиве која се назива „подношење“ на „фалсе“. Ова вредност је постављена за атрибут ладда дугмета за слање. Првобитним подешавањем овог на фалсе, кажемо да не желимо да дугме за слање још има ладда ефекат.
- Изјављујемо функцију која се позива када се притисне дугме за слање. У овој функцији постављамо „подношење“ на тачно. Ово ће довести до примене ладда ефекта на дугме за слање.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Када се образац првобитно прикаже, дугме за слање приказује се у једноставном облику.
Када се притисне дугме за слање, променљива за слање у контролеру се поставља на тачно. Ова вредност се преноси атрибуту "ладда" дугмета за слање што узрокује ефекат окретања дугмета.
Резиме
- Провера ХТМЛ контрола текстуалног оквира може се извршити коришћењем атрибута 'рекуиред'.
- У ХТМЛ5 су додате нове контроле као што су лозинка, е-пошта и број које пружају сопствени скуп провера.
- Валидација обрасца у АнгуларЈС брине се тако што се погледају вредности $ дирти, $ валид, $ инвалид и $ пристине контроле обрасца.
- Аутоматска валидација у апликацијама АнгуларЈС такође се може постићи коришћењем модула ЈЦС-аутоматска валидација.
- Ладда дугмад се могу додати у апликацију Ангулар.јс како би корисник добио мало побољшаног визуелног осећаја када се притисне дугме.