Налаштовувані шаблони перевірки для текстових полів

A текстове поле приймає будь-який текст, введений користувачами, але іноді потрібні певні формати. URL-адреси веб-сайтів, коди продуктів, номери ліцензій або назви, що складаються лише з літер, мають шаблони, які роблять їх дійсними. Користувацькі шаблони перевірки дозволяють точно визначити, який формат є прийнятним, виявляючи помилки перед надсиланням.

У цьому посібнику ви дізнаєтеся, як додавати власні шаблони перевірки до текстових полів у формах WordPress.

Що таке шаблони валідації?

Концепція

Шаблони перевірки – це правила, які визначають, які вхідні дані є дійсними:

• «Має містити лише літери»
• «Повинна бути дійсна URL-адреса»
• «Має відповідати формату ABC-1234»
• «Повинно бути рівно 10 символів»

Як вони працюють

1. Користувач вводить дані в текстовому полі
2. Під час надсилання (або під час введення) введені дані перевіряються на відповідність шаблону
3. Якщо збігається: Перевірка пройдена
4. Якщо ні: відображається повідомлення про помилку

Переваги

• Якість даних: Забезпечте узгодженість форматів
• Запобігання помилкам: Виявляйте помилки на ранній стадії
• Керівництво користувача: Чіткі очікування
• Сумісність з нижчими потоками: Дані працюють з іншими системами

Вбудовані шаблони перевірки

Автоматичний конструктор форм включає поширені закономірності:

Використання вбудованих шаблонів

Крок 1: Додавання текстового поля

1. Відкрийте свою форму в АФБ
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 (відсутній протокол)
• просто трохи тексту

Тільки літери

Використовувати для:

• Ім'я/прізвище (проста перевірка)
• Назви міст
• Коди країн
• Алфавітні ідентифікатори

Дійсні приклади:

• Джон
• коваль
• Нью-Йорк

Недійсні приклади:

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

Примітка: Тільки літери – це суворо. Подумайте, чи потрібні вам пробіли, дефіси чи наголоси.

Тільки цифри

Використовувати для:

• ідентифікаційні номери
• Номери рахунків
• Кількість (якщо не використовується числове поле)
• PIN-коди

Дійсні приклади:

• 12345
• 00123
• 9876543210

Недійсні приклади:

• 123-456 (дефіс)
• 123.45 (десятковий)
• 12345A

Буквено-цифрові

Використовувати для:

• Коди товарів
• Довідкові номери
• Імена користувачів
• Серійні номери

Дійсні приклади:

• ABC123
• User42
• PROD001

Недійсні приклади:

• ABC-123 (дефіс)
• ABC 123 (пробіл)
• ABC_123 (підкреслення)

Користувацькі шаблони перевірки (регулярний вираз)

Що таке Regex?

Регулярні вирази (regex) – це шаблони, що описують текстові формати:

• ^ = Початок рядка
• $ = Кінець рядка
• [A-Z] = Будь-яка велика літера
• [a-z] = Будь-яка мала літера
• [0-9] = Будь-яка цифра
• {3} = Рівно 3 з попередніх
• {2,5} = Між 2 та 5 попередніми
• + = Один або декілька
• * = Нуль або більше
• ? = Необов'язково (нуль або один)

Створення власних візерунків

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

Приклади поширених користувацьких візерунків

Поштовий індекс США

шаблон: ^\d{5}(-\d{4})?$

Підтверджує:

• 12345 (5 цифри)
• 12345-6789 (поштовий індекс+4)

Відхиляє:

• 1234 (занадто коротко)
• 123456 (занадто довгий)
• ABCDE (літери)

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

шаблон: ^\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)

шаблон: ^[A-Z]{3}-\d{4}$

Підтверджує:

• Азбука-1234
• XYZ-9999
• PRO-0001

Відхиляє:

• abc-1234 (нижній регістр)
• AB-1234 (лише 2 літери)
• ABC1234 (без дефісу)

Номерний знак (різні формати)

Шаблон (загальний для США): ^[A-Z0-9]{1,7}$

Підтверджує: 1-7 великих літер/цифр

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

шаблон: ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$

Підтверджує:

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

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

Ім'я користувача (літери, цифри, символ підкреслення)

шаблон: ^[a-zA-Z][a-zA-Z0-9_]{2,19}$

Правила:

• Починається з літери
• Всього 3-20 символів
• Тільки літери, цифри, підкреслення

Підтверджує: user_123, JohnDoe, test42

Шестигранний код кольору

шаблон: ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

Підтверджує:

• #FF5733
• #fff
• #ABC123

Дата (РРРР-ММ-ДД)

шаблон: ^\d{4}-\d{2}-\d{2}$

Підтверджує: 2026-01-15

Примітка: Для дат зазвичай краще використовувати поле «Дата» з вибором дати.

Час (ГГ:ХХ 24-годинний)

шаблон: ^([01]\d|2[0-3]):[0-5]\d$

Підтверджує:

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

Номер рахунку-фактури (INV-YYYY-NNNN)

шаблон: ^INV-\d{4}-\d{4}$

Підтверджує:

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

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

шаблон: ^\d{3}-\d{2}-\d{4}$

Підтверджує: 123-45-6789

Увага! Будьте обережні зі збором номерів соціального страхування (SSN) — це стосується безпеки та конфіденційності.

Створення власних візерунків

Покроковий процес

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. Розгляньте альтернативи

Іноді інші підходи кращі:

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

Поєднання з іншими перевірками

Шаблон + обов'язковий

• Поле має бути заповнене ТА відповідати шаблону
• Порожнє не працює, «обов’язково»
• Неправильний формат не вдається

Візерунок + Мін./Макс. довжина

• Шаблон перевіряє формат
• Довжина підтверджує розмір
• Обидва мають пройти

Виправлення неполадок

Шаблон не працює

Перевірте:

• Синтаксис правильний (без друкарських помилок)
• Спеціальні символи правильно екрановані
• ^ та $ якорі, якщо потрібно

Дійсний вхід відхиляється

Перевірте:

• Візерунок може бути занадто суворим
• Відсутні дійсні символи у шаблоні
• Проблеми з чутливістю до регістру

Приймається недійсний вхід

Перевірте:

• Візерунок може бути занадто вільним
• Відсутні анкори (^ та $)
• Перевірте з додатковими прикладами

Поширені запитання

Чи можна поєднувати кілька візерунків?

Одне поле використовує один шаблон. Для складної перевірки об'єднайте вимоги в одному регулярному виразі за допомогою чергування (|) або створіть шаблон, який відповідає всім вимогам.

Чи чутливі шаблони до регістру?

За замовчуванням, так. Використовуйте [A-Za-z] для збігу обох регістрів або додайте прапорець без урахування регістру, якщо підтримується.

Як дозволити пробіли?

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

А як щодо міжнародних символів?

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

Чи слід мені перевірити на Blur чи надіслати?

Обидва працюють. При розмитті (втраті фокусу) зворотний зв'язок швидший. При надсиланні фіксує все. Багато форм роблять і те, і інше.

Резюме

Додавання власних шаблонів перевірки:

1. Виберіть тип візерунка – Вбудований або індивідуальний
2. Налаштувати шаблон – Виберіть або введіть регулярний вираз
3. Додати заповнювач – Показати очікуваний формат
4. Додати довідковий текст – Поясніть вимоги
5. Встановити повідомлення про помилку – Корекція напрямних
6. Ретельно протестуйте – Дійсні та недійсні вхідні дані

Висновок

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

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

Готові перевірити введені дані у форму? Завантажити автоматичний конструктор форм і переконайтеся, що ваші форми збирають правильно відформатовані дані.