Како применити валидацију обрасца у Ангулар ЈС?



Овај чланак ће вам пружити детаљно и свеобухватно знање о томе како применити проверу образаца у Ангулар ЈС са примерима

Валидација је метода за овјерити корисник. Користи се у свим веб технологијама попут и . Али данас ћемо се фокусирати на валидацију у Ангулар ЈС следећим редоследом:

Шта је валидација обрасца?

Валидација обрасца је техника помоћу које можемо потврдити ХТМЛ образац. Узмимо једноставан пример да претпоставимо да корисник има ХТМЛ образац и да ХТМЛ образац има различита поља, та поља потврђује валидатор облика када желимо да потврдимо образац само треба да проверимо вредност одређеног поља изразом валидатора .





validation-in-angular-jsАко су регуларни израз и вредност поља исти, онда можемо рећи да је наш образац потврђен. У ХТМЛ обрасцу постоје различите врсте провере ваљаности попут е-поште, обавезне, мин, макс, лозинке итд.

Валидација обрасца у Ангулар ЈС

Разговарајмо о томе како можемо потврдити облик у угаоном ЈС. Ангулар ЈС пружа разне особине за проверу обрасца које можемо користити за валидацију обрасца или за добијање података из обрасца.



  • $ валид : Ово својство говори да ли је поље важеће или не применом одговарајућег правила о томе.

  • $ инвалид : Као што назив каже неважеће, ако је ово плочица, поље је неваљано или није засновано на одговарајућем правилу о томе.

  • $ нетакнуто : Вратиће тачно у пољу за унос обрасца које се не користи.



  • $ прљав : Вратиће тачно у пољу за унос обрасца.

  • $ дирнуто : БоолеанТруе ако је унос замућен.

Да бисте приступили обрасцу: .

Да бисте приступили улазу: ..

Објаснимо сада пример са валидацијом облика у угаоном ЈС-у, тако да прво направимо две датотеке, једна је апп.јс, а друга индек.хтмл. Наша датотека индек.хтм садржи једноставан ХТМЛ образац који има угаону проверу ваљаности, а датотека апп.јс садржи позадински код за обраду потврде обрасца на страници индек.хтмл.

Тхеиндек.хтмлсадржај странице образац саневажећисвојина и шта то тачно значи?

Својство новалидате у ознаци обрасца говори ХТМЛ-у да можемо да користимо нашу прилагођену проверу обрасца. Ако не дамо својство новалидате тада, а ХТМЛ образац се валидира помоћу ХТМЛ5 задатих својстава за проверу обрасца.

Кораци у валидацији обрасца

У нашем обрасцу створили смо 6 поља у нашем обрасцу, то су име, презиме, е-пошта, телефон, лозинка и порука.

  1. Прво, додамо потребан валидатор поља, овај валидатор поручује корисницима да је потребно одређено поље.

  2. Следеће је поље е-поште ако корисник не да ниједну важећу е-пошту, онда наш валидатор е-поште баца грешку при потврди е-поште.

  3. Минималну и максималну дужину у валидацији лозинке постављамо минимална дужина 5, а максимална 8, тако да корисник може дати важећу лозинку између 5 и 8 знакова.

  4. На крају, постављамо обавезна поља за телефон и поруке, а посебно примењујемо проверу броја на пријављеном телефону.

Код за валидацију обрасца у Ангулар ЈС

управљање набавкама у управљању пројектима

индек.хтмл

Пример кутног опсега Име 

Ова пријава је обавезна

Презиме

Ова пријава је обавезна

Емаил

Ова пријава је обавезна

Није важећа адреса е-поште

Телефон

Ова пријава је обавезна

Ово није важећи телефон

Лозинка

Ова пријава је обавезна

Лозинка између 5 до 8 знакова

Порука

Ова пријава је обавезна

прихвати

апп.јс

вар апп = ангулар.модуле ('нгВалидАпп', []) апп.цонтроллер ('нгВалидЦонтроллер', функција ($ опсег) {})

Разговарајмо о неким смерницама за валидацију које се користе у облику:

  • нг-потребан : За обезбеђивање потребног поља
  • нг-схов : Да бисте приказали поруку о грешци на основу услова (проверите својства провере)
  • мале дужине : За обезбеђивање минималне дужине
  • нг-макленгтх : За обезбеђивање максималне дужине
  • оф-паттерн : Да одговара одређеном обрасцу
  • нг-модел : Повезује поље са својствима провере као што су $ еррор, $ валид итд.

Овим смо дошли до краја овог чланка Валидација у Ангулар ЈС. Надам се да сте разумели разне ствари које треба узети у обзир за валидацију облика у Ангулар ЈС.

Ако желите да сазнате више о Ангулар фрамеворк-у, погледајте наш који долази са обуком уживо коју воде инструктори и искуством у стварном животу. Овај тренинг ће вам помоћи да дубље разумете Ангулар и помоћи вам да постигнете овладавање предметом.

Имате питање за нас? Молимо вас да га спомињете у одељку за коментаре овог чланка и јавићемо вам се.