Пользовательские шаблоны проверки для текстовых полей

A текстовое поле Система принимает любой ввод пользователя, но иногда требуются определенные форматы. URL-адреса веб-сайтов, коды продуктов, номера лицензий или имена, состоящие только из букв, — все они имеют определенные шаблоны, обеспечивающие их корректность. Пользовательские шаблоны проверки позволяют точно определить допустимый формат, выявляя ошибки до отправки.

В этом руководстве вы узнаете, как добавить пользовательские шаблоны проверки данных в текстовые поля форм WordPress.

Что такое шаблоны проверки?

Концепт

Шаблоны проверки — это правила, определяющие, какие входные данные являются допустимыми:

• «Должно содержать только буквы»
• «Должен быть действительный URL-адрес»
• «Должен соответствовать формату ABC-1234»
• «Должно быть ровно 10 символов»

Как они работают

1. Пользователь вводит текст в текстовое поле.
2. При отправке (или во время ввода) введенные данные проверяются на соответствие шаблону.
3. Если совпадает: Проверка пройдена успешно.
4. Если этого не произойдёт: отобразится сообщение об ошибке.

Преимущества

• Качество данных: Обеспечьте единообразие форматов.
• Предотвращение ошибок: Выявляйте ошибки на ранних стадиях
• Руководство пользователя: Четкие ожидания
• Совместимость с нижестоящими системами: Данные взаимодействуют с другими системами.

Встроенные шаблоны проверки

Автоматический конструктор форм включает в себя распространенные шаблоны:

Использование встроенных шаблонов

Шаг 1: Добавить текстовое поле

1. Откройте свою форму в AFB
2. Перетащите Текст поле для формирования
3. Нажмите для настройки

Шаг 2: Выберите шаблон проверки

1. Найти Шаблон проверки в настройках
2. Выберите из выпадающего списка:
   • Нет (без закономерности)
   • Эл. адрес
   • URL
   • Только письма
   • Только цифры
   • алфавитно-цифровой
   • На заказ
3. Сохранить настройки

Шаг 3: Проверка результатов тестирования

1. Предварительный просмотр формы
2. Попробуйте ввести корректные данные — должно пройти проверку.
3. Попробуйте ввести недопустимый текст — должно отобразиться сообщение об ошибке.

Примеры шаблонов и варианты использования

Проверка URL-адреса

Использовать для:

• Поле веб-сайта
• Ссылки на портфолио
• Социальные медиа-профили
• Справочные URL-адреса

Действительные примеры:

• https://example.com
• http://www.example.com/page
• https://example.com/path?query=value

Неверные примеры:

• example.com (отсутствует протокол)
• www.example.com (отсутствует протокол)
• просто какой-то текст

Только письма

Использовать для:

• Имя/фамилия (простая проверка)
• Названия городов
• Коды стран
• Алфавитные идентификаторы

Действительные примеры:

• John
• Smith
• NewYork

Неверные примеры:

• John123
• Нью-Йорк (космос)
• О'Брайен (апостроф)

Примечание: Строгое правило — использовать только буквы. Подумайте, нужны ли вам пробелы, дефисы или диакритические знаки.

Только цифры

Использовать для:

• Идентификационные номера
• Номера счетов
• Количество (если не используется числовое поле)
• PIN коды

Действительные примеры:

• 12345
• 00123
• 9876543210

Неверные примеры:

• 123-456 (дефис)
• 123.45 (десятичное)
• 12345A

алфавитно-цифровой

Использовать для:

• Коды продуктов
• Справочные номера
• Usernames
• Серийные номера

Действительные примеры:

• ABC123
• User42
• Prod001.

Неверные примеры:

• ABC-123 (дефис)
• ABC 123 (космос)
• ABC_123 (нижнее подчеркивание)

Пользовательские шаблоны проверки (регулярные выражения)

Что такое регулярное выражение?

Регулярные выражения (regex) — это шаблоны, описывающие форматы текста:

• ^ = Начало строки
• $ = Конец строки
• [A-Z] = Любая заглавная буква
• [a-z] = Любая строчная буква
• [0-9] = Любая цифра
• {3} = Ровно 3 из предыдущих
• {2,5} = От 2 до 5 предыдущих
• + = Один или более
• * = Ноль или больше
• ? = Необязательно (ноль или один)

Создание пользовательских шаблонов

1. Выберите «Пользовательский» в раскрывающемся списке проверки.
2. Введите свой шаблон регулярного выражения.
3. Проведите тестирование с использованием различных входных данных.

Примеры распространенных пользовательских шаблонов

Почтовый индекс США

Pattern: ^\d{5}(-\d{4})?$

Проверяет:

• 12345 (5 цифр)
• 12345-6789 (ZIP+4)

Отклоняет:

• 1234 (слишком короткий)
• 123456 (слишком длинно)
• ABCDE (буквы)

Номер телефона в США

Pattern: ^\d{3}-\d{3}-\d{4}$

Проверяет: 555-123-4567

Для гибкого формата: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

Проверяет:

• 555-123-4567
• (555) 123-4567
• 555.123.4567
• 555 123 4567

Код товара (формат ABC-1234)

Pattern: ^[A-Z]{3}-\d{4}$

Проверяет:

• АВС-1234
• XYZ-9999
• PRO-0001

Отклоняет:

• abc-1234 (строчные буквы)
• AB-1234 (всего 2 буквы)
• ABC1234 (отсутствует дефис)

Номерные знаки (различные форматы)

Тип (общеамериканский): ^[A-Z0-9]{1,7}$

Проверяет: 1-7 заглавных букв/цифр

Кредитная карта (базовый формат)

Pattern: ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$

Проверяет:

• 1234567890123456
• 1234 5678 9012 3456
• 1234-5678-9012-3456

Примечание: Для осуществления реальных платежей используйте соответствующие платежные системы с проверкой платежных данных.

Имя пользователя (буквы, цифры, нижнее подчеркивание)

Pattern: ^[a-zA-Z][a-zA-Z0-9_]{2,19}$

Правила:

• Начинается с буквы
• Всего от 3 до 20 символов.
• Только буквы, цифры, нижнее подчеркивание.

Проверяет: user_123, JohnDoe, test42

Шестнадцатеричный цветовой код

Pattern: ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

Проверяет:

• #FF5733
• #fff
• #АВС123

Дата (ГГГГ-ММ-ДД)

Pattern: ^\d{4}-\d{2}-\d{2}$

Проверяет: 2026-01-15

Примечание: Для работы с датами обычно лучше использовать поле типа «Дата» с календарем выбора даты.

Время (ЧЧ:ММ, 24-часовой формат)

Pattern: ^([01]\d|2[0-3]):[0-5]\d$

Проверяет:

• 09:30
• 14:45
• 23:59

Номер счета-фактуры (INV-YYYY-NNNN)

Pattern: ^INV-\d{4}-\d{4}$

Проверяет:

• ИНВ-2026-0001
• ИНВ-2025-1234

Номер социального страхования (США)

Pattern: ^\d{3}-\d{2}-\d{4}$

Проверяет: 123-45-6789

Внимание! Будьте осторожны при сборе номеров социального страхования — это может повлиять на безопасность и конфиденциальность.

Создание собственных шаблонов

Пошаговый процесс

1. Определите требования: Какой формат вам нужен?
2. Сломай: Какие символы, сколько их, в каком порядке?
3. Шаблон построения: Преобразовать в регулярное выражение
4. Тщательно протестируйте: Допустимые И недопустимые входные данные
5. Вывести сообщение об ошибке: Помогите пользователям понять формат.

Пример: Идентификатор сотрудника

Требование: 2 буквы + 4 цифры + 1 буква (например, AB1234C)

Сломать:

• 2 заглавные буквы: [A-Z]{2}
• 4 цифры: \d{4}
• 1 заглавная буква: [A-Z]
• Ничего до или после: ^ и $

Финальный узор: ^[A-Z]{2}\d{4}[A-Z]$

Тестирование шаблонов

Перед использованием в форме:

• Проверка корректности входных данных (должна пройти).
• Проверка на недопустимые входные данные (должна завершиться ошибкой)
• Проверка крайних случаев (границы, специальные символы)
• Используйте онлайн-тестеры регулярных выражений для отладки.

Сообщения об ошибках при проверке

Сообщения по умолчанию

• «Пожалуйста, введите допустимое значение»
• «Это поле недопустимо»

Улучшенные персонализированные сообщения

Сообщите пользователям ожидаемый формат:

Использование текста-заполнителя и текста справки

Предотвратите ошибки, отображая форматирование сразу:

• Заполнитель: «ABC-1234»
• Текст справки: «Введите код вашего товара (например, ABC-1234)»

Лучшие практики

1. Начните с простого

По возможности используйте встроенные шаблоны. Использование пользовательских регулярных выражений усложняет задачу.

2. Не переусердствуйте с проверкой достоверности.

Чрезмерно строгие правила вызывают недовольство пользователей:

• Имена с дефисами (Мэри-Джейн)
• Имена с апострофами (О'Брайен)
• Международные персонажи (Хосе, Мюллер)

3. Показать ожидаемый формат

Всегда сообщайте пользователям, чего вы от них ожидаете:

• Заполнитель с примером
• Текст справки с пояснением формата
• Очистить сообщение об ошибке

4. Тестирование граничных случаев

• Пустой ввод
• Пробелы в начале/конце
• Специальные символы
• Максимальная длина

5. Рассмотреть альтернативы

Иногда другие подходы оказываются лучше:

• Даты → Использовать поле «Дата»
• Числа → Использовать числовое поле
• Телефон → Используйте поле «Телефон» с заданным форматом.
• Фиксированные параметры → Использовать выпадающее меню

Сочетание с другими методами проверки

Шаблон + Обязательно

• Поле должно быть заполнено И соответствовать шаблону.
• Пустой файл не соответствует "требованию".
• Неправильный формат нарушает шаблон

Шаблон + Минимальная/Максимальная длина

• Шаблон проверяет формат
• Длина подтверждает размер
• Оба должны сдать

Шаблоны для устранения неполадок

Шаблон не работает

Проверьте:

• Синтаксис правильный (опечаток нет).
• Специальные символы правильно экранированы
• При необходимости используйте привязки ^ и $.

Допустимые входные данные отклоняются

Проверьте:

• Возможно, правила слишком строгие.
• В шаблоне отсутствуют допустимые символы.
• Вопросы, связанные с регистром символов.

Принимается недопустимый ввод.

Проверьте:

• Возможно, узор слишком свободный.
• Отсутствуют якоря (^ и $)
• Проверьте на большем количестве примеров.

Часто задаваемые вопросы (FAQ)

Можно ли комбинировать несколько узоров?

Для одного поля используется один шаблон. Для сложной проверки объедините требования в одно регулярное выражение, используя чередование (|), или создайте шаблон, соответствующий всем требованиям.

Чувствительны ли шаблоны к регистру?

По умолчанию — да. Используйте [A-Za-z] для сопоставления обоих регистров или добавьте флаг нечувствительности к регистру, если он поддерживается.

Как мне расставить пробелы?

Добавьте \s к вашему классу символов: [A-Za-z\s] соответствует буквам и пробелам.

А что насчет персонажей из других стран?

Стандартный набор букв [A-Za-z] не включает символы с диакритическими знаками. Для международных имен следует рассмотреть более свободную проверку или использовать \p{L} (если поддерживается) для любой буквы.

Следует ли выполнять валидацию при потере фокуса (blur) или при отправке формы (subject)?

Оба варианта работают. При потере фокуса (blur) обратная связь происходит быстрее. При отправке формы отслеживается всё. Многие формы используют оба подхода.

Резюме

Добавление пользовательских шаблонов проверки:

1. Выберите тип узора – Встроенные или пользовательские
2. Настроить шаблон – Выберите или введите регулярное выражение
3. Добавить заполнитель – Показать ожидаемый формат
4. Добавить текст справки – Объясните требования
5. Установить сообщение об ошибке – Исправление руководства
6. Тщательно протестируйте – Допустимые и недопустимые входные данные

Заключение

Пользовательские шаблоны проверки обеспечивают качество данных, гарантируя соблюдение определенных форматов. Независимо от того, нужна ли вам проверка URL-адресов, кодов товаров или пользовательских идентификаторов, шаблоны выявляют ошибки до отправки и направляют пользователей к правильному вводу.

Автоматический конструктор форм Включает в себя распространенные шаблоны (электронная почта, URL, буквы, цифры, буквенно-цифровые символы) и поддерживает пользовательские регулярные выражения для специализированных задач проверки. Чистые данные начинаются с надлежащей проверки.

Готовы проверить введенные в форму данные? Скачать Auto Form Builder и убедитесь, что ваши формы собирают данные в правильном формате.