Атрибут 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;
}

0 комментариев

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *