Modele de validare personalizate pentru câmpuri de text
A câmp text acceptă orice tastează utilizatorii, dar uneori aveți nevoie de formate specifice. Adresele URL ale site-urilor web, codurile de produs, numerele de licență sau numele formate doar din litere au toate modele care le fac valide. Modelele de validare personalizate vă permit să definiți exact ce format este acceptabil, detectând erorile înainte de trimitere.
În acest ghid, veți învăța cum să adăugați modele de validare personalizate în câmpurile de text din formularele WordPress.
Ce sunt modelele de validare?
Conceptul
Modelele de validare sunt reguli care definesc ce date de intrare sunt valide:
- „Trebuie să conțină doar litere”
- „Trebuie să fie o adresă URL validă”
- „Trebuie să corespundă formatului ABC-1234”
- „Trebuie să fie exact 10 caractere”
Cum funcționează
- Tipuri de utilizatori în câmpul de text
- La trimitere (sau pe măsură ce tastează), datele introduse sunt verificate în funcție de model
- Dacă se potrivește: Validarea a trecut
- Dacă nu se întâmplă acest lucru: Se afișează un mesaj de eroare
Beneficii
- Calitatea datelor: Asigurați formate consecvente
- Prevenirea erorilor: Depistează greșelile din timp
- Ghid de utilizare: Așteptări clare
- Compatibilitate în aval: Datele funcționează cu alte sisteme
Modele de validare încorporate
Constructor automat de formulare include modele comune:
| Model | validează | Exemplu de intrare validă |
|---|---|---|
| Formatul adresei de e-mail | [e-mail protejat] | |
| URL-ul | Adresele URL ale site-urilor web | https://example.com |
| Numai litere | AZ, doar AZ | John Smith |
| Numai numere | Doar 0-9 | 12345 |
| Alfanumeric | Litere și numere | ABC123 |
| pachet personalizat | Propriul tău model regex | (depinde de model) |
Utilizarea modelelor încorporate
Pasul 1: Adăugați un câmp de text
- Deschideți formularul în A.F.B.
- Trage Text câmp de formular
- Faceți clic pentru a configura
Pasul 2: Selectați modelul de validare
- Găsi Model de validare în setări
- Alegeți din meniul derulant:
- Niciunul (fără model)
- URL-ul
- Numai litere
- Numai numere
- Alfanumeric
- pachet personalizat
- Salvează setările
Pasul 3: Validarea testului
- Formular de previzualizare
- Încercați o intrare validă - ar trebui să fie acceptată
- Încercați o introducere nevalidă - ar trebui să afișeze o eroare
Exemple de modele și cazuri de utilizare
Validare URL
Utilizați pentru:
- Câmpul site-ului web
- Linkuri de portofoliu
- Profiluri media sociale
- URL-uri de referință
Exemple valide:
- https://example.com
- http://www.example.com/page
- https://example.com/path?query=value
Exemple nevalide:
- example.com (lipsește protocolul)
- www.example.com (lipsește protocolul)
- doar niște text
Numai litere
Utilizați pentru:
- Prenume/nume de familie (validare simplă)
- Nume de orașe
- Coduri de țară
- Identificatori alfabetici
Exemple valide:
- Ioan
- Fierar
- NewYork
Exemple nevalide:
- John123
- New York (spațiu)
- O'Brien (apostrof)
Notă: „Doar litere” este strict. Luați în considerare dacă aveți nevoie de spații, cratime sau accente.
Numai numere
Utilizați pentru:
- Numere de identificare
- Numere de cont
- Cantitate (când nu se utilizează câmpul numeric)
- Coduri PIN
Exemple valide:
- 12345
- 00123
- 9876543210
Exemple nevalide:
- 123-456 (cratimă)
- 123.45 (zecimală)
- 12345A
Alfanumeric
Utilizați pentru:
- Coduri de produs
- Numere de referință
- Nume de utilizatori
- Numere de serie
Exemple valide:
- ABC123
- User42
- PROD001
Exemple nevalide:
- ABC-123 (cratimă)
- ABC 123 (spațiu)
- ABC_123 (subliniere)
Modele de validare personalizate (Regex)
Ce este Regex?
Expresiile regulate (regex) sunt modele care descriu formate de text:
^= Începutul șirului de caractere$= Sfârșit de șir[A-Z]= Orice literă mare[a-z]= Orice literă mică[0-9]= Orice cifră{3}= Exact 3 din cele anterioare{2,5}= Între 2 și 5 din cele anterioare+= Unul sau mai multe*= Zero sau mai mult?= Opțional (zero sau unu)
Crearea de modele personalizate
- Selectați „Personalizat” din meniul derulant de validare
- Introduceți modelul expresiei regulate
- Test cu diverse intrări
Exemple comune de modele personalizate
Cod poștal SUA
Model: ^\d{5}(-\d{4})?$
Validează:
- 12345 (5 de cifre)
- 12345-6789 (cod poștal+4)
Respinge:
- 1234 (prea scurt)
- 123456 (prea lung)
- ABCDE (litere)
Număr de telefon din SUA
Model: ^\d{3}-\d{3}-\d{4}$
Validează: 555-123-4567
Pentru format flexibil: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$
Validează:
- 555-123-4567
- (555) 123-4567
- 555.123.4567
- 555 123 4567
Cod produs (format ABC-1234)
Model: ^[A-Z]{3}-\d{4}$
Validează:
- ABC-1234
- XYZ-9999
- PRO-0001
Respinge:
- abc-1234 (minuscule)
- AB-1234 (doar 2 litere)
- ABC1234 (cratima lipsă)
Plăcuță de înmatriculare (diverse formate)
Model (general în SUA): ^[A-Z0-9]{1,7}$
Validează: 1-7 litere mari/cifre
Card de credit (format de bază)
Model: ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$
Validează:
- 1234567890123456
- +1234 5678 9012 3456
- 1234-5678-9012-3456
Notă: Pentru plățile efective, utilizați procesatorii de plăți corespunzători, cu validarea acestora.
Nume de utilizator (Litere, Cifre, Subliniere)
Model: ^[a-zA-Z][a-zA-Z0-9_]{2,19}$
reguli:
- Începe cu litera
- 3-20 de caractere în total
- Doar litere, cifre, subliniere
Validează: utilizator_123, JohnDoe, test42
Cod de culoare hexadecimal
Model: ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
Validează:
- #FF5733
- #fff
- #ABC123
Data (AAAA-LL-ZZ)
Model: ^\d{4}-\d{2}-\d{2}$
Validează: 2026-01-15
Notă: Pentru date, utilizarea unui câmp Dată cu selector de dată este de obicei mai bună.
Timp (HH:MM 24 de ore)
Model: ^([01]\d|2[0-3]):[0-5]\d$
Validează:
- 09:30
- 14:45
- 23:59
Număr factură (INV-AAAA-NNNN)
Model: ^INV-\d{4}-\d{4}$
Validează:
- INV-2026-0001
- INV-2025-1234
Număr de asigurări sociale (SUA)
Model: ^\d{3}-\d{2}-\d{4}$
Validează: 123-45-6789
Avertisment: Ai grijă la colectarea numerelor de securitate socială – implicații în materie de securitate și confidențialitate.
Construirea propriilor modele
Proces pas cu pas
- Definiți cerințele: De ce format ai nevoie?
- Descompune-l: Ce personaje, câte, în ce ordine?
- Model de construcție: Traduceți în expresie regulată
- Testați temeinic: Intrări valide ȘI nevalide
- Scrie mesajul de eroare: Ajută utilizatorii să înțeleagă formatul
Exemplu: ID angajat
Cerinţă: 2 litere + 4 cifre + 1 literă (de exemplu, AB1234C)
Pană:
- 2 litere mari:
[A-Z]{2} - 4 cifre:
\d{4} - 1 literă mare:
[A-Z] - Nimic înainte sau după:
^și$
Model final: ^[A-Z]{2}\d{4}[A-Z]$
Testarea modelelor
Înainte de utilizare în formă:
- Testează intrările valide (ar trebui să fie acceptate)
- Testează intrările nevalide (ar trebui să eșueze)
- Cazuri limită de testare (limite, caractere speciale)
- Folosește testere regex online pentru depanare
Mesaje de eroare pentru validare
Mesaje implicite
- „Vă rugăm să introduceți o valoare validă”
- „Acest câmp este invalid”
Mesaje personalizate mai bune
Spuneți utilizatorilor formatul așteptat:
| Model | Mesaj de eroare mai bun |
|---|---|
| Codul poștal | „Vă rugăm să introduceți un cod poștal valid (de exemplu, 12345 sau 12345-6789)” |
| Phone | „Vă rugăm să introduceți numărul de telefon 555-123-4567” |
| Codul produsului | „Format: ABC-1234 (3 litere, cratimă, 4 cifre)” |
| Nume de utilizator | „Numele de utilizator trebuie să înceapă cu o literă, 3-20 de caractere, doar litere/cifre/sublinieri” |
Utilizarea substituentului și a textului de ajutor
Preveniți erorile afișând formatul în avans:
- Substituent: „ABC-1234”
- Text de ajutor: „Introduceți codul produsului dvs. (de exemplu, ABC-1234)”
Cele mai bune practici
1. Începeți Simplu
Folosește modele predefinite atunci când este posibil. Regex-urile personalizate adaugă complexitate.
2. Nu supravalidați
Modelele prea stricte îi frustrează pe utilizatori:
- Nume cu cratime (Mary-Jane)
- Nume cu apostrofuri (O'Brien)
- Personaje internaționale (José, Müller)
3. Afișați formatul așteptat
Spuneți întotdeauna utilizatorilor ce așteptări aveți:
- Substitut cu exemplu
- Text de ajutor care explică formatul
- Ștergeți mesajul de eroare
4. Cazuri de testare la limită
- Intrare goală
- Spații la început/sfârșit
- Personaje speciale
- Lungime maxima
5. Luați în considerare alternativele
Uneori, alte abordări sunt mai bune:
- Date → Utilizați câmpul Dată
- Numere → Folosește câmpul Număr
- Telefon → Folosește câmpul Telefon cu format
- Opțiuni fixe → Utilizați meniul derulant
Combinarea cu alte validări
Model + Obligatoriu
- Câmpul trebuie completat ȘI să corespundă modelului
- Gol eșuează „obligatoriu”
- Model de eșuare a formatului greșit
Model + Lungime min./max.
- Modelul validează formatul
- Lungimea validează dimensiunea
- Ambele trebuie să treacă
Depanarea tiparelor
Modelul nu funcționează
Verifica:
- Sintaxa este corectă (fără greșeli de scriere)
- Caracterele speciale au fost evadate corect
- Ancorele ^ și $, dacă este necesar
Intrare validă respinsă
Verifica:
- Modelul poate fi prea strict
- Lipsesc caractere valide în model
- Probleme de sensibilitate la majuscule/minuscule
Intrare nevalidă acceptată
Verifica:
- Modelul poate fi prea lejer
- Ancore lipsă (^ și $)
- Testează cu mai multe exemple
Întrebări frecvente
Pot combina mai multe modele?
Un singur câmp folosește un singur model. Pentru validare complexă, combinați cerințele într-o singură expresie regulată folosind alternanța (|) sau creați modelul care să corespundă tuturor cerințelor.
Sunt modelele sensibile la majuscule/minuscule?
În mod implicit, da. Folosiți [A-Z-Z] pentru a potrivi ambele majuscule sau adăugați un indicator insensibil la majuscule/minuscule, dacă este acceptat.
Cum permit spații?
Adaugă \s la clasa personajului tău: [A-Za-z\s] potrivește literele și spațiile.
Dar personajele internaționale?
Standardul [A-Za-z] nu include caractere accentuate. Pentru numele internaționale, luați în considerare o validare mai flexibilă sau folosiți \p{L} (dacă este acceptat) pentru orice literă.
Ar trebui să validez la estompare sau să trimit?
Ambele funcționează. La estompare (pierderea focalizării) oferă un feedback mai rapid. La trimitere, surprinde totul. Multe formulare fac ambele lucruri.
Rezumat
Adăugarea de modele de validare personalizate:
- Alegeți tipul de model – Încorporat sau personalizat
- Configurați modelul – Selectați sau introduceți expresia regulată
- Adăugați un substituent – Afișează formatul așteptat
- Adăugați text de ajutor – Explicați cerințele
- Setați mesajul de eroare – Corecție ghidată
- Testați temeinic – Intrări valide și nevalide
Concluzie
Modelele de validare personalizate asigură calitatea datelor prin impunerea unor formate specifice. Indiferent dacă aveți nevoie de validare URL, coduri de produs sau identificatori personalizați, modelele detectează erorile înainte de trimitere și ghidează utilizatorii pentru corectarea datelor introduse.
Constructor automat de formulare include modele comune (e-mail, URL, litere, cifre, alfanumerice) și acceptă expresii regulate personalizate pentru nevoi de validare specializate. Datele curate încep cu o validare corectă.
Ești gata să validezi datele introduse în formular? Descărcați Auto Form Builder și asigurați-vă că formularele dvs. colectează date formatate corect.