Начална » Уеб дизайн » Въведение в проверката на ограниченията на HTML5

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

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

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

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

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

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

    1. Полезно

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

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

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

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

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

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

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

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

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

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

    За да направи оценката, алгоритъмът използва атрибути за въвеждане на елементи за въвеждане, като ,

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

    4. модел за проверка на Regex

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

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

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

    Примерът по-долу изисква от потребителите да въведат парола с дължина минимум 8 знака и да съдържа поне една буква и един номер (източник на използвания от мен ред).

     

    Още няколко неща

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

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

    елемент.