Преглед провјере ХТМЛ обрасца
Веб обрасци су најчешће најчешће коришћени и најважнији део веб апликација. Провјера обрасца је поступак провјере података које је корисник унео према унапријед дефинираним правилима. Провера обрасца може се одвијати или на страни клијента или на страни сервера. Верификација ХТМЛ обрасца је облик провјере на страни клијента у којем ће се извршити провјера података прије слања података на сервер. Провјера ХТМЛ обрасца је значајна и корисна јер побољшава корисничко сучеље на страни клијента и перформансе веб апликације.
Потврда ХТМЛ обрасца
Постоје углавном два начина на које се може извршити провјера ХТМЛ обрасца,
- Кориштење уграђене функционалности ХТМЛ5
- Коришћењем ЈаваСцрипт-а
1. Кориштење уграђене функционалности ХТМЛ5
ХТМЛ5 пружа ову значајку потврде форме без употребе ЈаваСцрипта. Елементи обрасца ће имати атрибуте потврде који ће аутоматски омогућити потврду обрасца. Атрибути провјере омогућују нам да одредимо различите врсте правила на нашим елементима обрасца. Омогућују нам да подесимо дужину података, поставимо ограничење на вредности података итд.
Погледајмо један једноставан пример валидације ХТМЛ обрасца помоћу уграђених елемената за потврду форме и затим ћемо наставити даље за верификацију ХТМЛ обрасца помоћу ЈаваСцрипта.
Пример
Валидација обрасца помоћу атрибута ХТМЛ5 за потврђивање - У овом примјеру користит ћемо потребну ознаку за провјеру облика која ће узроковати да се подаци у том пољу уносе обавезно, јер се у противном образац неће предати. Испод је исјечак кода за исти, заједно са неким стиловима веб обрасца.
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
Name:
Тако да имамо врло једноставан веб образац заједно са само једним пољем података као "Име". Имајте на уму да смо користили потребну кључну реч у елементу улазног тага.
Излаз :
Покушајмо да пошаљемо образац без уноса вредности у поље имена. Након подношења, добит ћете поруку о грешци као „Молимо испуните ово поље“ и образац се неће предати.
Излаз са празним подацима
Тако да се види да поруку о грешци нисмо додали ми, а пружа је сам ХТМЛ.
Као и потребан атрибут који пружа ХТМЛ, доступне су за употребу различите ознаке обрасца. Испод је листа неких ознака за проверу облика,
- минленгтх: Користи се за подешавање потребне минималне дужине елемента
- макленгтх: Користи се за подешавање потребне максималне дужине елемента
- образац: Користи се за дефинисање регуларног израза
2. Коришћењем ЈаваСцрипта
ЈаваСцрипт се широко користи за потврђивање ХТМЛ обрасца јер пружа више начина за прилагођавање и постављање правила за проверу ваљаности, такође неке ознаке дате у ХТМЛ5 нису подржане у старијим верзијама Интернет Екплорера. ЈаваСцрипт се дуго користи за потврђивање обрасца.
У провери ЈаваСцрипта обрасца, у основи, дефинишемо функције за потврђивање података пре него што их доставимо на сервер. Можемо имплементирати било коју логику потребну за постизање правила за потврду. ЈаваСцрипт је на овај начин флексибилнији јер нема ограничења у дефинисању правила. Али потребно је имати знање о ЈаваСцрипт-у да бисте то имплементирали у поређењу са потврђивањем обрасца помоћу уграђених ознака.
Погледајмо пример провере обрасца помоћу ЈаваСцрипта. Имплементираћемо исти пример обрасца са само једним улазом као и име елемента.
Пример:
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
.errorMessage (
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
)
.errorMessage.top-arrow:after (
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
)
Name:
function validateForm() (
var nameVal = document.forms("simpleForm")("name").value;
if(nameVal == null || nameVal == "") (
document.getElementsByClassName( "errorMessage" )(0).style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )(0).innerHTML = "Please Fill out this field";
return false;
) else (
return true;
)
)
Из претходног примера уклонили смо потребну ознаку из елемента облика „наме“. Уместо тога у елемент форме смо додали једну ознаку. Као што је већ поменуто, писат ћемо функцију за потврђивање којој је ознака додана.
Написали смо функцију која се зове валидатеФорм () која ће извршити потврду. Примењујемо исто правило проверавања да ли су унесени подаци у поље имена празни или нису. Логика да се то провери је кликом на дугме за слање, ова функција ће се позвати и унета вредност ће се проверити да ли је нула или је празна. Функција ће се вратити труе ако подаци нису нулл или празни, али ако су подаци празни или нулл, тада се кориснику приказује порука о грешци.
Излаз
Ако покушамо да пошаљемо образац без уношења било каквих података, требало би да добијемо поруку о грешци на екрану. Као што се види из примера да смо поруку о грешци дизајнирали на исти могући начин.
Излаз са празним подацима
Закључак - Потврда ХТМЛ обрасца
Дакле, видели смо врло једноставан пример валидације обрасца на страни клијента. Постоје два начина за провјеру ХТМЛ провјере обрасца. Прво је коришћење уграђене функционалности обезбеђене у ХТМЛ5, а друго употребом ЈаваСцрипта. Користећи прву методу, не треба нам писати додатни код.
Препоручени чланци
Ово је водич за провјеру ХТМЛ обрасца. Овдје смо расправљали о прегледу и два начина провјере ХТМЛ обрасца помоћу којих се они могу извести. Можда ћете такође погледати следеће чланке да бисте сазнали више -
- ХТМЛ Евентс
- Версионс оф Хтмл
- Елементи ХТМЛ5
- Примене ХТМЛ-а