К вопросу о типах форм в HTML5, регулярных выражениях и валидации форм на основе регулярных выражений. Философское рассуждение на ночь глядя.
Атрибут required
Наиболее простой способ реализации валидации html-форм - это добавить к 1
input(type="text")
1
required
Данный атрибут сообщает браузерам, что содержимое поля ввода необходимо для заполнения. Теперь браузеры будут проверять содержимое поля ввода - то есть, выполнять его валидацию.
Заметьте - браузеры сами будут это выполнять, без какого-либо участия Javascript/jQuery с нашей стороны (это и есть одна из многогранных сторон HTML5).
В CSS3 для форм ввода разработаны два псевдо-класса:
- :valid
- :invalid
Оба псевдокласса предназначены для управления видом форм (1
border
1
background
Например, такой простейший код будет изменять фон поля ввода при валидности или невалидности содержимого:
&__input
border 1px solid #ddd
border-radius 5px
padding 3px 10px
&:valid
background-color rgba(245,255,250,.5)
&:invalid
background-color rgba(220,20,60,.5)Тут возникает законный вопрос - а каким образом браузер определяет, валидное или невалидное содержимое у этого поля?
В данном случае - очень просто и примитивно (для наглядности примера). Если поле не содержит никакого (любого) символа, то поле считается невалидным и браузер генерирует для данного поля псевдо-класс 1
:invalid
Если же поле содержит хотя бы один символ (любой - не обязательно текстовый), то данное поле уже считается валидным и браузер генерирует для этого поля псевдо-класс 1
:valid
Note! Содержимое атрибута
не рассматривается браузером как содержимое формы. Другими словами, если поле ввода имеет атрибут
с каким-то значением, то это поле будет считаться браузером все равно невалидным.
Типы input
Конечно, на практике такое поведение браузера имеет мало смысла, поэтому для валидации форм были созданы различные способы фильтрации введенных данных.
Одним из таких способов фильтрации введенных данных является задание для элемента 1
input
1
input
Например, 1
input(type=“email”)
1
input(type=“number”)
1
input(type=“tel”)
1
input(type=“date”)
1
input(type=“url”)
Краткий список HTML5-типов 1
input
- number
- tel
- date
- url
- time
- week
- color
- search
Эти различные типы input’ов в HTML5 - не просто блаж в угоду призрачной HTML-семантики, как я сам воспринимал их ранее. На самом деле - это именованные регулярные выражения.
Ну как - испугал я читателя? На самом деле регулярные выражения - это очень просто. Фактически - это набор символов, собранных воедино по определенному правилу и записанных в определенном синтаксисе.
Грубо говоря - 1
[1,2,3,4,5,6,7,8,9]
1
number
1
number
Фактически типы 1
input
И когда для элемента 1
input
1
type="email"
Вот я и подошел к самому интересному моменту - для чего нужны регулярные выражения? А нужны они для проверки введенных данных. Это маска, которую браузер накладывает на введенные пользователем данные. Совпала маска и данные - данные валидные; не совпала маска и введенные данные - данные невалидные.
Помимо предустановленных регулярных выражений, можно создавать свои собственные, для определенных задач. Но для этого необходимо использовать соответствующий синтаксис и другие несложные знания по этой теме.
Подключаются пользовательские регулярные выражения в HTML с помощью атрибута 1
pattern
input type="text" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}"Note! Использование пользовательского
совместно с любым HTML5-типом (email, date, range, tel, number и так далее) для элемента input почти никогда не имеет смысла по определению.
На этом все.
