Въведение в проверката на ограниченията на HTML5

Интерактивни уебсайтове и приложения не могат да бъдат представени без форми, които ни позволяват свържете се с нашите потребители, и към получаване на данните ние се нуждаем, за да осигурим безпроблемни операции с тях. Ние се нуждаем валиден потребителски вход, но ние трябва да го придобием по такъв начин не осуетява нашите потребители твърде много.

Макар че можем да подобрим използваемостта на формулярите с интелигентно избрани UX шаблони за дизайн, HTML5 има и естествен механизъм за валидиране на ограничения, който ни позволява да улавяйте грешките при въвеждането в предния край.

В тази публикация ще се съсредоточим върху валидиране на ограничения, предоставено от браузъра, и погледнете как могат да се занимават разработчиците на интерфейси осигурете валидно въвеждане от потребителя с помощта на HTML5.

Защо имаме нужда от предварителен вход

Входно валидиране има две основни цели. Съдържанието, което получаваме, трябва да бъде:

1. Полезно

Имаме нужда от използваеми данни, с които можем да работим. Трябва да накараме хората да влязат реалистични данни в правилния формат. Например, никой, който е жив днес, не е роден преди 200 години. Първоначално получаването на подобни данни може да изглежда смешно, но в дългосрочен план това е досадно и популяризира нашата база данни с безполезни данни.

2. Обезопасете

Когато говорим за сигурност, това означава, че трябва предотврати инжектирането на злонамерено съдържание - умишлено или случайно.

Може да се постигне полезност (получаване на разумни данни) само от страна на клиента, екипът на бекенда не може да помогне с това. Да постигна, да достигна сигурност, разработчиците на предната и задната част трябва да работят заедно.

Ако разработчиците на интерфейса правилно потвърдят въвеждането на клиентската страна, екипът ще трябва да се справя с много по-малко уязвимости. Хакерството (сайтът) често води до това изпращане на допълнителни данни, или данни в грешен формат. Разработчиците могат да се борят с дупки в сигурността като тези, успешно да се борят от предния край.

Например, това ръководство за сигурност на PHP препоръчва да проверите всичко, което можем, от страна на клиента. Те подчертават важността на валидирането на входния интерфейс, като дават много примери, като например:

"Валидността на въвеждане работи най-добре с изключително ограничени стойности, например когато нещо трябва да е цяло число, или буквено-цифров низ, или HTTP URL адрес."

При валидирането на входния интерфейс нашата работа е да налагат разумни ограничения при въвеждане от потребителя. Функцията за валидиране на ограниченията на HTML5 ни осигурява средства за това.

Валидиране на ограничения на HTML5

Преди HTML5, разработчиците на frontend са били ограничени до валидиране на потребителския вход с JavaScript, което беше досаден и податлив на грешки процес. За да подобри валидирането на формуляри от страна на клиента, HTML5 въведе a валидиране на ограничения алгоритъм, който работи в модерни браузъри, и проверява валидността на подадените данни.

За да направи оценката, алгоритъмът използва атрибути за въвеждане на елементи за въвеждане, като , </code>, и <code><select></code>. Ако искате да знаете как валидирането на ограниченията се случва стъпка по стъпка в браузъра, проверете това WhatWG doc.</p> <p>Благодарение на функцията за проверка на ограниченията на HTML5 можем да изпълним всички <strong>стандартни задачи за валидиране на входа</strong> от страна на клиента <strong>без JavaScript, единствено с HTML5</strong>.</p> <p>За да изпълните по-сложни задачи, свързани с проверката, HTML5 ни предоставя a <strong>JavaScript API за проверка на ограниченията</strong> можем да използваме за настройка на нашите персонализирани скриптове за проверка.</p> <h4>Проверка с типове семантичен вход</h4> <p>HTML5 въведе <strong>типове семантични входове</strong> това - освен посочване на значението на елемента за потребителските агенти - също може да се използва за <strong>валидиране на потребителския вход</strong> чрез ограничаване на потребителите до определен входен формат.</p> <p>Освен типовете входни данни, които вече са съществували преди HTML5 (<code>текст</code>, <code>парола</code>, <code>Изпращане</code>, <code>нулиране</code>, <code>радио</code>, <code>отметка</code>, <code>бутон</code>, <code>скрит</code>), можем също да използваме следното <strong>семантични типове HTML5 за въвеждане</strong>: <code>електронна поща</code>,<code>тел</code>,<code>URL</code>,<code>номер</code>,<code>път</code>,<code>дата</code>,<code>Време за среща</code>,<code>дата и час-местен</code>, <code>месец</code>,<code>седмица</code>, <code>диапазон</code>, <code>Търсене</code>,<code>цвят</code>.</p> <p>Можем безопасно да използваме HTML5 типове вход с по-стари браузъри, тъй като те ще се държат като <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>тип = "URL"</code> потребителите могат да изпращат вход, който следва URL формата (започва с протокол, като например <code>HTTP: //</code> или <code>FTP: //</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> HTML етикет, който работи подобно на тези типове входни данни, ограничени по дизайн; позволява на потребителите да избират от падащия списък.</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>Използвайте атрибутите за проверка на HTML5</h4> <p>Използването на семантични входни типове поставя определени ограничения върху това, което потребителите могат да представят, но в много случаи искаме да отидем малко по-далеч. Това е, когато <strong>атрибути, свързани с валидирането</strong> от <code><input></code> може да ни помогне.</p> <p>Атрибутите, свързани с валидирането, принадлежат на определени типове входни данни (те не могат да се използват за <em>всичко</em> типове), върху които налагат допълнителни ограничения.</p> <h5>1. <code>длъжен</code> за получаване на валиден вход с всички средства</h5> <p>Най- <code>длъжен</code> атрибутът е най-известният атрибут за проверка на HTML. Това е <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>URL</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> HTML тагове.</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>, или по - голям от. \ t <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> в HTML5.</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>URL</code>, <code>тел</code>, <code>електронна поща</code> и <code>парола</code> входни типове и с <code><textarea></code> HTML етикет.</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">

Най- максимална дължина атрибут не връща съобщение за грешка, но браузърът просто не позволява на потребителите да въвеждат повече от зададения знаков номер. Затова е от решаващо значение информират потребителите за ограничението, в противен случай няма да разберат защо не могат да продължат да пишат.

 4. модел за проверка на Regex
 Най- модел атрибут ни позволяват използвайте регулярни изрази в процеса на валидиране на входа. Редовният израз е a предварително зададен набор от знаци които формират определен модел. Можем да я използваме или за търсене на низове, които следват модела, или за налагане на определен формат, определен от шаблона.
 С модел атрибутът, който можем да направим - ограничава потребителите да изпращат своите данни във формат, който съответства на дадения нормален израз.
  Най- модел атрибут има много случаи на употреба, но може да бъде особено полезен, когато искаме валидиране на поле за парола.
 Примерът по-долу изисква от потребителите да въведат парола с дължина минимум 8 знака и да съдържа поне една буква и един номер (източник на използвания от мен ред). 
   * Твоята парола:   
 
 Още няколко неща
 В тази статия разгледахме как да използваме проверката на формуляри, предоставена от браузъра предоставена от алгоритъма за корекция на ограниченията на HTML5. За да създадем нашите персонализирани скриптове за проверка, трябва да използваме API за валидиране на ограничението, което може да бъде следващата стъпка при усъвършенстване на уменията за проверка на формуляри.
 HTML5 формулярите са достъпни чрез помощни технологии, така че не е задължително да използваме ария-необходим ARIA атрибут за маркиране на необходимите полета за въвеждане на екранни четци. Все пак може да е полезно да добавите поддръжка за достъпност за по-стари браузъри. Възможно е също така да се откажете от валидирането на ограниченията чрез добавяне на novalidate булев атрибут на 
 елемент.