Атрибут pattern применим только к полям input.
Самые популярные регулярные выражения
Выражение | Описание |
---|---|
\d [0-9] | Одна цифра от 0 до 9. |
\D [^0-9] | Любой символ кроме цифры. |
\s | Пробел. |
[A-Z] | Только заглавная латинская буква. |
[A-Za-z] | Только латинская буква в любом регистре. |
[А-Яа-яЁё] | Только русская буква в любом регистре. |
[A-Za-zА-Яа-яЁё] | Любая буква русского и латинского алфавита. |
[0-9]{3} | Три цифры. |
[A-Za-z]{6,} | Не менее шести латинских букв. |
[0-9]{,3} | Не более трёх цифр. |
[0-9]{5,10} | От пяти до десяти цифр. |
^[a-zA-Z]+$ | Любое слово на латинице. |
^[А-Яа-яЁё\s]+$ | Любое слово на русском включая пробелы. |
^[ 0-9]+$ | Любое число. |
[0-9]{6} | Почтовый индекс. |
\d+(,\d{2})? | Число в формате 1,34 (разделитель запятая). |
\d+(\.\d{2})? | Число в формате 2.10 (разделитель точка). |
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} | IP-адрес |
Оформление input и сообщений об ошибке
Вариант 1. Сообщение об ошибке по умолчанию
HTML:
<pre><form action="***.php"> <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}" title="Username should only contain lowercase letters. e.g. john"> </form></pre>
Вариант 2. Собственное сообщение об ошибке
HTML:
<pre><form action="***.php"> <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}" id="username"> </form></pre>
JavaScript:
input.oninvalid = function(event) { event.target.setCustomValidity('Username should only contain lowercase letters. e.g. john'); }
CSS:
input:invalid { border-color: red; } input, input:valid { border-color: #ccc; }
1 комментарий
Оксана · 29.07.2020 в 04:15
Безмерно интересная информация. Не лишним будет порассуждать.