HTML Тег <input> атрибут pattern
Пример
HTML форма с полем ввода, которое может содержать только три буквы (без цифр или специальных символов):
<form action="/action_page.php">
<label for="country_code">Код страны:</label>
<input
type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}"
title="Трехбуквенный код страны"><br><br>
<input type="submit">
</form>
Попробуйте сами »
Определение и использование
Атрибут pattern указывает регулярное выражение, по которому проверяется значение элемента <input> при отправке формы.
Примечание: Атрибут pattern работает со следующими типами входных данных: text, date, search, url, tel, email, и password.
Совет: Используйте глобальный атрибут title для описания шаблона, чтобы помочь пользователю.
Совет: Узнайте больше о regular expressions в учебнике по JavaScript.
Поддержка браузеров
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот атрибут.
| Атрибут | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
Синтаксис
<input pattern="regexp">
Значение атрибута
| Значение | Описание |
|---|---|
| regexp | Задает регулярное выражение, по которому проверяется значение элемента <input> |
Еще примеры
Пример
Элемент <input> с type="password", который должен содержать 8 или более символов:
<form action="/action_page.php">
<label for="pwd">Пароль:</label>
<input type="password" id="pwd"
name="pwd"
pattern=".{8,}" title="Восемь или более символов">
<input type="submit">
</form>
Попробуйте сами »
Пример
В элементе <input> с type="password" должен содержать 8 или более символов, состоящих по крайней мере из одного числа, а также одной прописной и строчной буквы:
<form action="/action_page.php">
<label for="pwd">Пароль:</label>
<input type="password" id="pwd" name="pwd"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Должен содержать не менее одной цифры, одной прописной и строчной буквы, а также не менее 8 и более символов">
<input type="submit">
</form>
Попробуйте сами »
Пример
В элементе <input> с type="email" должен быть в следующем порядке: characters@characters.domain (символы, за которыми следует знак @, а затем еще несколько символов, а затем "."
После знака ".", нужно добавить по крайней мере 2 буквы от a до z:
<form action="/action_page.php">
<label for="email">Email:</label>
<input type="email" id="email" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit">
</form>
Попробуйте сами »
Пример
В элементе <input> с type="search" не может содержать следующие символы: ' или "
<form action="/action_page.php">
<label for="search">Поиск:</label>
<input type="search" id="search" name="search"
pattern="[^'\x22]+" title="Неверный ввод">
<input type="submit">
</form>
Попробуйте сами »
Пример
В элементе <input> с type="url" должен начаться с http:// или https:// далее следует по крайней мере один символ:
<form action="/action_page.php">
<label for="website">Домашняя страница:</label>
<input type="url" id="website" name="website"
pattern="https?://.+" title="Включить http://">
<input type="submit">
</form>
Попробуйте сами »
