При создании веб-приложений важно серьезно относиться к безопасности, особенно, когда приходится иметь дело с получением данных от пользователей.
Общее правило безопасности - не доверять никому, так что нельзя надеяться на то, что пользователи всегда будут вводить в формы правильные значения. Например, вместо ввода в поле правильного email-адреса, пользователь может ввести неверный адрес, или вообще какие-нибудь вредоносные данные.
Когда дело доходит до валидации пользовательских данных, ее можно проводить как на стороне клиента (в веб-браузере), так и на серверной стороне.
Ранее валидацию на стороне клиента можно было провести только с помощью JavaScript. Но все изменилось (или почти изменилось), так как с помощью HTML5 валидацию можно проводить средствами браузера, без необходимости писать сложные скрипты для валидации на JavaScript.
Валидация форм с помощью HTML5HTML5 предоставляет довольно надежный механизм, основанный на следующих атрибутах тега : type , pattern и require . Благодаря этим новым атрибутам вы можете переложить некоторые функции проверки данных на плечи браузера.
Давайте рассмотрим эти атрибуты, чтобы понять, как они могут помочь в валидации форм.
Атрибут typeЭтот атрибут говорит, какое поле ввода отобразить для обработки данных, например, уже знакомое поле типа
Некоторые поля ввода уже предоставляют стандартные способы валидации, без необходимости писать дополнительный код. Например, проверяет поле на то, что введенное значение соответствует шаблону правильного email адреса. Если в поле введен неверный символ, форму нельзя будет отправить, пока значение не будет исправлено.
Попробуйте поиграться со значениями поля email в нижеприведенной демонстрации .
Также существуют другие стандартные типы полей, вроде , и для валидации чисел, URL’ов и телефонных номеров соотвествено.
Замечание: формат телефонного номера различается для разных стран из-за несоответствия количества цифр в телефонных номерах и разности форматов. Как результат, спецификация не определяет алгоритм проверки телефонных номеров, так что на время написания статьи данная возможность слабо поддерживается браузерами.
К счастью для нас, валидацию телефонных номеров можно провести с использованием атрибута pattern , который принимает как аргумент регулярное выражение, который мы рассмотрим далее.
Атрибут patternАтрибут pattern , скорее всего, заставит многих фронтенд-разработчиков прыгать от радости. Этот атрибут принимает регулярное выражение (аналогичное формату регулярных выражений JavaScript), по которому будет проверяться корректность введенных в поле данных.
Регулярные выражения это язык, использующийся для разбора и манипуляции текстом. Они часто используются для сложных операций поиска и замены, а также для проверки корректности введенных данных.
На сегодняшний день регулярные выражения включены в большинство популярных языков программирования, а также во многие скриптовые языки, редакторы, приложения, базы данных, и утилиты командной строки.
Регулярные выражения (RegEX) являются мощным, кратким и гибким инструментом для сопоставления строки текста, вроде отдельных символов, слов или шаблонов символов.
Передав регулярное выражение в качестве значения атрибута pattern можно указать, какие значения приемлемы для данного поля ввода, а также проинформировав пользователя об ошибках.
Давайте посмотрим на пару примеров использования регулярных выражений для валидации значения полей ввода.
Телефонные номераКак упоминалось ранее, тип поля tel не полностью поддерживается браузерами из-за несоответствия форматов номеров телефонов в разных странах.
Например, в некоторых странах формат телефонных номеров представляется в виде xxxx-xxx-xxxx , и сам телефонный номер будет что-то вроде этого: 0803-555-8205 .
Регулярное выражение, которому соответствует данный шаблон, такое: ^\d{4}-\d{3}-\d{4}$ . В коде это можно записатьтак :
Phone Number:
Буквенно-цифровые значения Атрибут requiredЭто атрибут булевого типа, использующийся для указания того, что значение данного поле обязательно заполнить для того, чтобы отправить форму. При добавлении этого атрибута полю браузер потребует от пользователя заполнить данное поле перед отправкой формы.
Это избавляет нас от реализации проверки полей с помощью JavaScript, что может сохранить немного времени разработчикам.
Например: или (для совместимости с XHTML)
Во всех демках, которые вы видели выше, используют атрибут required , так что вы можете попробовать его в действии, попытавшись отослать форму без заполнения полей.
ЗаключениеПоддержка валидации форм браузерами довольно хороша , а для старых браузеров вы можете использовать полифиллы.
Стоит отметить, что надеяться на валидацию только на стороне браузера опасно, так как эти проверки могут быть легко обойдены злоумышленниками или ботами.
Не все браузеры поддерживают HTML5, и не все данные, посланные вашему скрипту, придут с вашей формы. Это значит, что перед тем, как окончательно принять данные от пользователя, необходимо проверить их корректность на стороне сервера.
Инструкция: Перед вами таблица с 49 числами - 25 в мелком шрифте и 24 - в крупном. Нужно отыскивать числа в мелком шрифте от 1 до 25 в возрастающей последовательности, а в крупном от 24 до 1 в убывающей. Делать это надо поочередно: 1 - в мелком шрифте, 24 - в крупном, 2 - в мелком, 23 - в крупном и т.д. Когда найдете число, запишите его в контрольный бланк вместе со стоящей рядом с ним буквой.
Время выполнения задания - 5 мин.
|
7-у
|
4-в |
15-в
|
8-ч |
11-к
|
1-г |
25-я
|
|
14-ш |
18-л
|
21-ф
|
15-з |
3-и
|
19-ф |
17-з
|
|
7-ж |
2-х
|
11-т |
10-с
|
23-м |
8-м
|
10-a |
|
17-б |
14-п
|
6-р |
20-п |
13-ч
|
23-ш
|
5-у |
|
9-ж
|
3-л |
22-б
|
1-е
|
16-ц |
6-д
|
13-н |
|
2-и |
4-ц
|
22-0 |
20-а
|
12-х |
19-з
|
24-е |
|
24-г
|
18-с |
12-т
|
9-к |
16-н
|
21-д |
5-о
|
Контрольный бланк:
|
Крупн.шр. |
Результаты: . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Оценка результатов (распределения и переключения внимания):
Методика «Воспроизведение геометрических фигур» (средний и старший подростковый возраст) Инструкция. В течение 10с предлагается внимательно рассмотреть фигуры, вписанные в 10 квадрат... Методика «Найди ошибку в пословицах» Инструкция: Найди ошибку в пословицах. Время для выполнения задания - 3 минуты. В бланк... Методика «оценка оперативной зрительной памяти» Оперативную зрительную память ребенка и ее показатели можно определить при помощи следующей п...
Добавить комментарийRequired Please choose another name
Required Please enter a valid e-mail
Afghanistan Albania Algeria Argentina Armenia Australia Austria Azerbaijan Bahrain Bangladesh Belarus Belgium Belize Bermuda Bolivarian Republic of Venezuela Bolivia Bosnia and Herzegovina Brazil Brunei Darussalam Bulgaria Cambodia Canada Caribbean Chile Colombia Costa Rica Croatia Czech Republic Denmark Dominican Republic Ecuador Egypt El Salvador Estonia Ethiopia Faroe Islands Finland France Georgia Germany Greece Greenland Guatemala Honduras Hong Kong S.A.R. Hungary Iceland India Indonesia Iran Iraq Ireland Islamic Republic of Pakistan Israel Italy Jamaica Japan Jordan Kazakhstan Kenya Korea Kuwait Kyrgyzstan Lao P.D.R. Latvia Lebanon Libya Liechtenstein Lithuania Luxembourg Macao S.A.R. Macedonia (FYROM) Malaysia Maldives Malta Mexico Mongolia Montenegro Morocco Nepal Netherlands New Zealand Nicaragua Nigeria Norway Oman Panama Paraguay People"s Republic of China Peru Philippines Poland Portugal Principality of Monaco Puerto Rico Qatar Republic of the Philippines Romania Russia Rwanda Saudi Arabia Senegal Serbia Serbia and Montenegro (Former) Singapore Slovakia Slovenia South Africa Spain Sri Lanka Sweden Switzerland Syria Taiwan Tajikistan Thailand Trinidad and Tobago Tunisia Turkey Turkmenistan U.A.E. Ukraine United Kingdom United States Uruguay Uzbekistan Vietnam Yemen Zimbabwe
RequiredДля любого web-разработчика пока нет более серьезной проблемы, как полная кроссбраузерность его продукта. Наверное, это одна из основных задач хорошего специалиста: добиться того, чтобы его сайт всегда правильно отображался во всех браузерах.
Параметр required , который иногда используется для input, не работает в древних IE, что просто нельзя так оставить. Пользователи-пенсионеры, которые до сих пор пользуются IE6 должны одинаково легко работать с вашим сайтом, наряду с пользователями Google Chrome последней версии. Кто, кроме web-разработчиков, о них может позаботиться.
О наболевшем, о Internet ExplorerДля нормальных браузеров, к которым можно отнести Firefox, Opera и Google Chrome, эта задача относительно легка. Даже давние версии этих браузеров одинаково хорошо отображают html-код, если в нем конечно же не используются какие-то новые технологии. Но чтобы добиться подобного в браузерах семейства Internet Explorer, требуются просто титанические усилия.
Каждая версия браузера Internet Exlorer обладает своей, уникальной тупостью. Что работает в IE6, может как положено не работать в IE7 и наоборот. Этот зоопарк компании Microsoft не удалось побороть даже в самой последней версии своего браузера.
Понять почему разработчики браузеров не могут просто взять открыть и почитать стандарты W3C для сайтостроения, я не могу.
Поэтому мне, как web-разработчику, приходится выступать некоторой «прослойкой» между капризными браузерами и требующими знаний и зрелищ посетителями сайтов. И замечательно, что web-разработчикам пока это удается.
Дак, как же заставить работать required в старых версиях IE?На помощь нам приходит JS. Раньше я терпеть его не мог, а теперь не вижу дальнейшего пути без него на просторе «правильного» WEB .
Решение приведенное ниже я выдумал не сам, а взял с буржуйского блога. Так как я жадный, а блог буржуйский, я не стану приводить на него ссылку.
За все у нас будет отвечать функция fnCheckFields() . Поместите на вашем сайте JS-код:
function fnCheckFields(form_obj){ var error_msg = "Пожалуйста, заполните все обязательные поля."; var is_error = false; for (var i = 0; form_obj_elem = form_obj.elements[i]; i++) if (form_obj_elem.type "input" || form_obj_elem.type "text") if (form_obj_elem.getAttribute("required") && !form_obj_elem.value) is_error = true; if (is_error) alert(error_msg); return !is_error; }
Обычно рекомендуют размещать его между html-тегами HEAD в начале страницы, но я бы рекомендовал все же размещать его в самом низу страницы до закрывающегося тега BODY . Таким образом JS меньше влияет на скорость загрузки страницы.
Окно ввода, где должен вводиться обязательный параметр, на html-языке должно выглядеть так:
Этот скрипт работает очень просто: после нажатия кнопки Отправить , скрипт проверяет все инпуты на наличие параметра required и если находит его, то соответственно смотрит на введенное значение этого поля. Если в такой инпут ничего не введено, то выводится предупреждающее окно о необходимости ввода. Данные соответственно никуда не отправляются.
Замечательно еще и то, что если у Вас нормальный браузер, который уже научился понимать этот параметр как положено, такого предупреждающего окна не всплывет и будут работать стандартные инструменты обработки параметра required для вашего браузера.
Рассказать в соц. сетях