Атрибут 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
Безмерно интересная информация. Не лишним будет порассуждать.