Увод у ХТМЛ5 ограничење валидације

Интерактивне веб странице и апликације се не могу замислити без облика који нам омогућавају повежите се са нашим корисницима, и то добити податке Потребно нам је да обезбедимо глатке трансакције са њима. Треба нам важећи кориснички унос, међутим, морамо да га стекнемо на такав начин не фрустрира нашим корисницима превише.

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

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

Зашто нам је потребна провјера улазних података

Инпут валидатион има два главна циља. Садржај који добијамо треба да буде:

1. Корисно

Морамо употребљиви подаци са којима можемо да радимо. Морамо да натерамо људе да уђу реалне податке у одговарајућем формату. На пример, нико ко је данас жив није рођен пре 200 година. Добијање података као што је овај може изгледати смешно у почетку, али дугорочно је досадно и попуњава нашу базу података бескорисним подацима.

2. Сецуре

Када говоримо о сигурности, то значи да морамо спречавање убризгавања злонамерног садржаја - било намјерно или случајно.

Може се постићи корисност (добијање разумних података) само на страни клијента, бацкенд тим не може превише помоћи у томе. Да достигне безбедности, предњи и позадински програмери морају да раде заједно.

Ако програмери фронтенда исправно потврде унос на страни клијента, бацкенд тим ће морати да се носи са много мање рањивости. Хаковање (сајт) често подразумева слање додатних података, или података у погрешном формату. Програмери се могу борити против сигурносних рупа попут ових, успјешно се боре са фронт-енд-а.

На пример, овај ПХП водич за безбедност препоручује да проверите све што можемо на страни клијента. Они наглашавају важност валидације фронтенд уноса тако што дају многе примјере, као што су:

"Провера ваљаности улаза ради најбоље са изузетно ограниченим вредностима, нпр. Када нешто мора да буде цели број, или алфанумерички низ или ХТТП УРЛ."

У валидацији улазних података, наш посао је да наметнути разумна ограничења на корисничком уносу. Функција валидације ограничења ХТМЛ5 пружа нам средства за то.

Валидација ХТМЛ5 ограничења

Пре ХТМЛ5, програмери су били ограничени на проверу корисничког уноса помоћу ЈаваСцрипт-а, што је био досадан и склон погрешкама. Да би се побољшала валидација образаца на страни клијента, ХТМЛ5 је увео а валидација ограничења алгоритам који ради у модерним претраживачима и проверава исправност достављеног уноса.

Да би се извршила процена, алгоритам користи атрибути који се односе на валидацију улазних елемената, као такав , </code>, и <code><select></code>. Ако желите знати како се провјера ограничења догађа корак по корак у прегледнику, погледајте овај ВхатВГ документ.</p> <p>Захваљујући ХТМЛ5 функцији валидације ограничења, можемо извршити све <strong>задаци стандардне валидације улаза</strong> на страни клијента <strong>без ЈаваСцрипт-а, искључиво са ХТМЛ5</strong>.</p> <p>Да бисте извршили сложеније задатке везане за валидацију, ХТМЛ5 нам даје а <strong>ЈаваСцрипт АПИ за валидацију ограничења</strong> можемо користити за постављање наших прилагођених скрипти за провјеру ваљаности.</p> <h4>Потврдите са семантичким типовима уноса</h4> <p>ХТМЛ5 је уведен <strong>семантички типови уноса</strong> да - осим указивања на значење елемента за корисничке агенте - може се користити и за то <strong>потврдите кориснички унос</strong> ограничавањем корисника на одређени улазни формат.</p> <p>Поред типова улаза који су већ постојали пре ХТМЛ5 (<code>текст</code>, <code>пассворд</code>, <code>прихвати</code>, <code>ресетовање</code>, <code>радио</code>, <code>поље за потврду</code>, <code>дугме</code>, <code>сакривен</code>), такође можемо користити следеће <strong>семантички ХТМЛ5 типови уноса</strong>: <code>емаил</code>,<code>тел</code>,<code>урл</code>,<code>број</code>,<code>време</code>,<code>датум</code>,<code>Датум време</code>,<code>датетиме-лоцал</code>, <code>месец дана</code>,<code>Недеља</code>, <code>домет</code>, <code>Претрага</code>,<code>цолор</code>.</p> <p>Можемо безбедно да користимо ХТМЛ5 типове улаза са старијим прегледачима, јер ће се понашати као <code><input type="text"></code> у претраживачима који их не подржавају.</p> <p>Да видимо шта се дешава када корисник унесе погрешан тип уноса. Рецимо да смо креирали поље за унос е-поште са следећим кодом:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Ваша е-адреса:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Када корисник унесе стринг који не користи формат е-поште, алгоритам валидације ограничења <strong>не шаље образац</strong>, и <strong>враћа поруку о грешци</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Исто правило важи и за друге типове улаза, на пример за <code>типе = "урл"</code> корисници могу да пошаљу само унос који прати УРЛ формат (почиње са протоколом, као што је <code>хттп: //</code> или <code>фтп: //</code>).</p> <p>Неки типови улаза користе дизајн који <strong>чак не дозвољава корисницима да унесу погрешан формат улаза</strong>, на пример <code>цолор</code> и <code>домет</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Боја позадине:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Ако користимо <code>цолор</code> Тип улаза корисник је ограничен да бира боју из берача боја или остаје са подразумеваном црном бојом. Поље за унос је <strong>ограничен дизајном</strong>, стога не оставља много шансе за корисничку грешку.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Када је то прикладно, вреди размотрити коришћење <code><select></code> ХТМЛ таг који функционише слично овим типовима уноса ограничених по дизајну; омогућава корисницима да изаберу из падајуће листе.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Ваше омиљено воће:</label> <select name="fruit"> <option value="apple">Аппле</option> <option value="pear">Крушка</option> <option value="orange">Оранге</option> <option value="raspberry">Малина</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Користите ХТМЛ5-ове атрибуте за проверу ваљаности</h4> <p>Коришћење семантичких типова улазних података поставља одређена ограничења на оно што је корисницима дозвољено да пошаљу, али у многим случајевима желимо ићи мало даље. Ово је када <strong>атрибуте везане за валидацију</strong> од <code><input></code> таг може да нам помогне.</p> <p>Атрибути повезани са валидацијом припадају одређеним типовима улаза (не могу се користити на <em>све</em> врсте) на којима намећу додатна ограничења.</p> <h5>1. <code>потребан</code> за добијање исправног уноса свим средствима</h5> <p>Тхе <code>потребан</code> атрибут је најпознатији атрибут ХТМЛ валидације. То је <strong>боолеан аттрибуте</strong> што то значи <strong>не узима никакву вредност</strong>, једноставно морамо да га ставимо у <code><input></code> означите ако желимо да га употребимо:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Ако корисник заборави да унесе вредност у тражено поље за унос, претраживач <strong>враћа поруку о грешци</strong> који их упозорава да попуне поље, и они <strong>не могу послати образац</strong> док не дају ваљани унос. Зато је увек важно <strong>марк визуално</strong> обавезна поља за кориснике.</p> <p>Тхе <code>потребан</code> атрибут може бити <strong>користе се заједно са следећим типовима улаза</strong>: <code>текст</code>, <code>Претрага</code>, <code>урл</code>, <code>тел</code>, <code>емаил</code>, <code>пассворд</code>, <code>датум</code>, <code>Датум време</code>, <code>датетиме-лоцал</code>, <code>месец дана</code>, <code>Недеља</code>,<code>време</code>, <code>број</code>, <code>поље за потврду</code>, <code>радио</code>, <code>филе</code>, плус са <code><textarea></code>и <code><select></code> ХТМЛ тагови.</p> <h5>2. <code>мин</code>, <code>мак</code> и <code>корак</code> за валидацију броја</h5> <p>Тхе <code>мин</code>, <code>мак</code> и <code>корак</code> атрибути нам омогућавају <strong>ставити ограничења на поља за унос бројева</strong>. Могу се користити заједно са <code>домет</code>, <code>број</code>, <code>датум</code>, <code>месец дана</code>, <code>Недеља</code>, <code>Датум време</code>, <code>датетиме-лоцал</code>, и <code>време</code> типови уноса.</p> <p>Тхе <code>мин</code> и <code>мак</code> атрибути пружају одличан начин за лако <strong>искључити неразумне податке</strong>. На пример, доле наведени пример приморава кориснике да поднесу старост између 18 и 120 година.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Твојих година:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Када алгоритам валидације ограничења наиђе на унос корисника мањи од <code>мин</code>, или већи од <code>мак</code> вредност, спречава је да дође до позадине и враћа поруку о грешци.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>Тхе <code>корак</code> аттрибуте <strong>специфицира нумерички интервал</strong> између законских вриједности нумеричког поља за унос. На пример, ако желимо да корисници изаберу само из преступних година можемо додати <code>степ = "4"</code> атрибут пољу. У доњем примеру сам користио <code>број</code> тип улаза, јер нема <code>типе = "иеар"</code> у ХТМЛ5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Ваша омиљена преступна година:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Са унапред постављеним ограничењима, корисници могу да бирају само из преступних година између 1972. и 2016. године ако користе малу стрелицу горе која долази са <code>број</code> инпут типе. Такође могу ручно да унесу вредност у поље за унос, али у случају да не испуњава ограничења, претраживач ће вратити поруку о грешци.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>максимална дужина</code> за валидацију дужине текста</h5> <p>Тхе <code>максимална дужина</code> атрибут омогућава <strong>поставите максималну дужину знака</strong> за текстуална поља за унос. Може се користити заједно са <code>текст</code>, <code>Претрага</code>, <code>урл</code>, <code>тел</code>, <code>емаил</code> и <code>пассворд</code> типове улаза и са <code><textarea></code> ХТМЛ таг.</p> <p>Тхе <code>максимална дужина</code> атрибут може бити одлично решење за поља телефонског броја која не могу имати више од одређеног броја знакова, или за контактне форме у којима не желимо да корисници пишу више од одређене дужине.</p> <p>Исјечак кода испод показује примјер за ово друго, ограничава корисничке поруке на 500 знакова. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Порука (максимално 500 знакова):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

Тхе максимална дужина аттрибуте не враћа поруку о грешци, али претраживач једноставно не дозвољава корисницима да уносе више од наведеног броја знакова. Зато је то кључно информисати кориснике о ограничењу, иначе неће разумети зашто не могу наставити с типкањем.

 
 * Твоја лозинка: