Персонализирани шаблони за валидиране на текстови полета

A текстово поле приема всичко, което потребителите въвеждат, но понякога са необходими специфични формати. URL адреси на уебсайтове, продуктови кодове, номера на лицензи или имена само с букви имат модели, които ги правят валидни. Персонализираните модели за валидиране ви позволяват да дефинирате точно какъв формат е приемлив, като откривате грешки преди изпращане.

В това ръководство ще научите как да добавяте персонализирани шаблони за валидиране към текстови полета във вашите WordPress формуляри.

Какво представляват моделите за валидиране?

Концепцията

Валидационните модели са правила, които определят кой вход е валиден:

• „Трябва да съдържа само букви“
• „Трябва да е валиден URL адрес“
• „Трябва да съответства на формат ABC-1234“
• „Трябва да е точно 10 знака“

Как работят

1. Потребителят въвежда текст в текстово поле
2. При изпращане (или докато пишат), входните данни се проверяват спрямо шаблон
3. Ако съвпада: Валидацията е успешна
4. Ако не стане: Показва се съобщение за грешка

Ползи

• Качество на данните: Осигурете последователни формати
• Предотвратяване на грешки: Откриване на грешки рано
• Указания за потребителя: Ясни очаквания
• Съвместимост надолу по веригата: Данните работят с други системи

Вградени шаблони за валидиране

Автоматичен конструктор на формуляри включва често срещани модели:

Използване на вградени шаблони

Стъпка 1: Добавяне на текстово поле

1. Отворете формуляра си в A.F.B.
2. Плъзнете Текст поле за формиране
3. Кликнете, за да конфигурирате

Стъпка 2: Изберете шаблон за валидиране

1. Какво Валидационен модел в настройките
2. Изберете от падащото меню:
   • Няма (няма модел)
   • Имейл
   • URL
   • Само букви
   • Само числа
   • Букви и цифри
   • Custom
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 (липсващ протокол)
• само малко текст

Само букви

Използвай за:

• Име/фамилия (проста проверка)
• Имена на градове
• Кодове на държави
• Азбучни идентификатори

Валидни примери:

• клозет
• Ковач
• NewYork

Невалидни примери:

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

Забележка: Само букви са стриктно допустими. Помислете дали са ви необходими интервали, тирета или ударения.

Само числа

Използвай за:

• Идентификационни номера
• Номера на сметки
• Количество (когато не се използва числово поле)
• ПИН кодове

Валидни примери:

• 12345
• 00123
• 9876543210

Невалидни примери:

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

Букви и цифри

Използвай за:

• Кодове на продукти
• Референтни номера
• Потребителските имена
• Серийни номера

Валидни примери:

• ABC123
• User42
• ПРОД001

Невалидни примери:

• ABC-123 (тире)
• ABC 123 (интервал)
• ABC_123 (долна черта)

Персонализирани шаблони за валидиране (Regex)

Какво е 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}$

Валидира:

• ABC-1234
• XYZ-9999
• PRO 0001 XNUMX

Отхвърля:

• 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}$

Валидира:

• INV-2026-0001
• INV-2025-1234

Номер на социална осигуровка (САЩ)

Модел: ^\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. Започнете Simple

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

2. Не прекалявайте с валидирането

Твърде строгите модели фрустрират потребителите:

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

3. Покажете очаквания формат

Винаги казвайте на потребителите какво очаквате:

• Заместител с пример
• Помощен текст, обясняващ формата
• Изчистване на съобщението за грешка

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

• Празен вход
• Интервали в началото/края
• Специални символи
• Максимална дължина

5. Обмислете алтернативи

Понякога други подходи са по-добри:

• Дати → Използване на полето „Дата“
• Числа → Използване на полето „Число“
• Телефон → Използване на полето Телефон с формат
• Фиксирани опции → Използване на падащото меню

Комбиниране с други валидации

Модел + Задължително

• Полето трябва да бъде попълнено И да съответства на шаблона
• Празно неуспешно „задължително“
• Грешен формат не успява шаблон

Модел + Мин/Макс Дължина

• Шаблонът валидира формата
• Дължината потвърждава размера
• И двете трябва да преминат

Отстраняване на проблеми с модели

Моделът не работи

Проверка:

• Синтаксисът е правилен (без правописни грешки)
• Специалните символи са екранирани правилно
• ^ и $ котви, ако е необходимо

Валиден вход се отхвърля

Проверка:

• Моделът може да е твърде строг
• Липсват валидни символи в шаблона
• Проблеми с чувствителността към главни и малки букви

Приема се невалиден вход

Проверка:

• Моделът може да е твърде свободен
• Липсващи котви (^ и $)
• Тествайте с още примери

Често задавани въпроси

Мога ли да комбинирам няколко модела?

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

Чувствителни ли са моделите към малки и големи букви?

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

Как да разреша интервали?

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

Ами международните символи?

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

Трябва ли да валидирам на Blur или да изпратя?

И двете работят. При размазване (загуба на фокус) дава по-бърза обратна връзка. При изпращане улавя всичко. Много формуляри правят и двете.

Oбобщение

Добавяне на персонализирани модели за валидиране:

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

Заключение

Персонализираните модели за валидиране гарантират качеството на данните, като налагат специфични формати. Независимо дали се нуждаете от валидиране на URL адреси, продуктови кодове или персонализирани идентификатори, моделите улавят грешки преди изпращане и насочват потребителите към коригиране на въведените данни.

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

Готови ли сте да валидирате въведените данни във формуляра си? Изтегляне на Auto Form Builder и се уверете, че формулярите ви събират правилно форматирани данни.