Phenquestions
Провера образаца је основни и најважнији део процеса веб развоја. Валидација обрасца обично се врши на страни сервера. Провера образаца помаже у приказивању порука о грешкама кориснику ако су наведени непотребни или погрешни подаци или је обавезно поље остало празно. Ако сервер пронађе било какву грешку, враћа је назад; затим приказујемо поруку о грешци кориснику. Али, можемо користити јавасцрипт на предњој страни да бисмо потврдили податке обрасца и одмах приказали грешке. У овом чланку ћемо научити основну проверу облика у јавасцрипту. Дакле, идемо директно на примере и видећемо како то можемо учинити у јавасцрипту.
Примери
Пре свега, претпостављамо образац са именом „тестФорм“, у којем имамо поље за унос са ознаком „Усер Наме“, а тип уноса шаље у нашу ХТМЛ датотеку. У ознаци обрасца креирали смо догађај онсубмит у којем вршимо затварање и враћамо функцију валидатеФунц ().
У датотеку скрипте написаћемо дефиницију функције валидатеФунц (), која ће се извршити сваки пут када корисник притисне дугме за слање. У тој функцији ћемо потврдити поље за унос корисничког имена. Претпостављамо да желимо да потврдимо да је поље за корисничко име празно или не када корисник притисне дугме за слање.
Дакле, за потврду поља корисничког имена. Прво додељујемо променљиву документу.тестФорм, само да би се код добио чист и разумљив. Тада ћемо у дефиницији функције написати код за валидацију. Написаћемо изјаву иф да бисмо проверили празно поље обрасца. Ако је поље за корисничко име празно, приказаћемо оквир упозорења да се прикаже грешка, поново се фокусирати на поље за корисничко име и вратити фалсе како образац неће бити послан. У супротном, ако прође проверу и подаци се потврде, функцији ћемо вратити вредност труе.
вар тхеФорм = документ.тестФорм;// Код за потврду обрасца
фунцтион валидатионФунц ()
ако (образац.име.вредност == "")
упозорење („име је празно“);
образац.име.фокус ();
ретурн фалсе;
повратак (тачно);
Након писања целог овог кода. Ако покренемо код и кликнемо на дугме за слање, а да ништа у поље обрасца не упишемо.
Као што можете приметити на доле приказаном снимку екрана, у пољу за упозорење се појављује грешка.
Ово је врло основни, али добар пример за почетак примене валидације обрасца. За даљу примену, попут вишеструке провере образаца или желите да проверите и дужину знака.
У ту сврху прво претпостављамо два поља обрасца у ознаци обрасца са ознаком „емаил“ и „пассворд“ у нашој ХТМЛ датотеци.
За валидацију у јавасцрипту, поново ћемо ставити изјаву иф за валидацију поља обрасца е-поште и лозинке у дефиницију функције датотеке скрипте. Претпоставимо да желимо да применимо више валидација на поље е-поште, као што поље не сме бити празно и његова дужина не сме бити мања од 10 знакова. Дакле, можемо да користимо ИЛИ „||“ у изјави иф. Ако се деси било која од ових грешака, приказаће се поље упозорења са поруком грешке коју желимо да прикажемо, усредсредити се на поље обрасца е-поште и вратити фалсе функцији. Слично томе, ако желимо да применимо проверу дужине знакова на пољу лозинке, то можемо и учинити.
вар тхеФорм = документ.тестФорм;// Код за потврду обрасца
фунцтион валидатионФунц ()
ако (образац.име.вредност == "")
упозорење („име је празно“);
образац.име.фокус ();
ретурн фалсе;
ако (образац.е-маил.вредност == "" || образац.е-маил.вредност.дужина < 10)
упозорење („Емаил је неприкладан“);
образац.е-маил.фокус ();
ретурн фалсе;
ако (образац.Лозинка.вредност.дужина < 6)
упозорење („Лозинка мора да има 6 знакова“);
образац.Лозинка.фокус ();
ретурн фалсе;
повратак (тачно);
Након што напишете сав овај код, поново учитајте страницу да бисте имали ажурирани код. Сада или остављамо празно поље е-поште или напишемо е-пошту краћу од 10 знакова. У оба случаја приказаће се грешка „Е-пошта је неприкладна“.
Дакле, на овај начин можемо применити основну проверу образаца у ЈаваСцрипт-у. Такође можемо применити проверу података на страни клијента помоћу Регек-а или писањем сопствене прилагођене функције. Претпоставимо да желимо да применимо проверу података на пољу е-поште. Редовни израз би био овакав за потврђивање е-поште.
ако (/ ^ [а-зА-З0-9.!# $% & '* + / =?^ _ '| ~ -] [заштићена е-поштом] [а-зА-З0-9 -] + (?: \.[а-зА-З0-9 -] +) * $ /.тест (образац.е-маил.вредност))
упозорење („Емаил је неприкладан“);
образац.е-маил.фокус ();
ретурн фалсе;
Ово је била само основна демонстрација валидације података помоћу регуларног израза. Али, небо је отворено за вас да летите.
Закључак
Овај чланак покрива основну проверу облика у јавасцрипту. Такође смо покушали да се увучемо у проверу података помоћу регуларног израза. Ако желите да сазнате више о регуларном изразу, имамо посебан чланак везан за регуларни израз на линукхинт-у.цом. Да бисте научили и разумели јавасцрипт концепте и кориснији садржај попут овог, наставите да посећујете линукхинт.цом. Хвала вам!
