Modele de validare personalizate pentru câmpuri de text

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ă

  1. Tipuri de utilizatori în câmpul de text
  2. La trimitere (sau pe măsură ce tastează), datele introduse sunt verificate în funcție de model
  3. Dacă se potrivește: Validarea a trecut
  4. 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ă
E-mail 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

  1. Deschideți formularul în A.F.B.
  2. Trage Text câmp de formular
  3. Faceți clic pentru a configura

Pasul 2: Selectați modelul de validare

  1. Găsi Model de validare în setări
  2. Alegeți din meniul derulant:
    • Niciunul (fără model)
    • E-mail
    • URL-ul
    • Numai litere
    • Numai numere
    • Alfanumeric
    • pachet personalizat
  3. Salvează setările

Pasul 3: Validarea testului

  1. Formular de previzualizare
  2. Încercați o intrare validă - ar trebui să fie acceptată
  3. Î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

  1. Selectați „Personalizat” din meniul derulant de validare
  2. Introduceți modelul expresiei regulate
  3. 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

  1. Definiți cerințele: De ce format ai nevoie?
  2. Descompune-l: Ce personaje, câte, în ce ordine?
  3. Model de construcție: Traduceți în expresie regulată
  4. Testați temeinic: Intrări valide ȘI nevalide
  5. 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:

  1. Alegeți tipul de model – Încorporat sau personalizat
  2. Configurați modelul – Selectați sau introduceți expresia regulată
  3. Adăugați un substituent – Afișează formatul așteptat
  4. Adăugați text de ajutor – Explicați cerințele
  5. Setați mesajul de eroare – Corecție ghidată
  6. 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.

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *