Patrons de validació personalitzats per a camps de text

A camp de text accepta qualsevol cosa que els usuaris escriguin, però de vegades calen formats específics. Les URL de llocs web, els codis de producte, els números de llicència o els noms només de lletres tenen patrons que els fan vàlids. Els patrons de validació personalitzats permeten definir exactament quin format és acceptable i detectar errors abans de l'enviament.

En aquesta guia, aprendràs a afegir patrons de validació personalitzats als camps de text dels formularis de WordPress.

Què són els patrons de validació?

El concepte

Els patrons de validació són regles que defineixen quina entrada és vàlida:

• "Només ha de contenir lletres"
• "Ha de ser una URL vàlida"
• "Ha de coincidir amb el format ABC-1234"
• "Ha de tenir exactament 10 caràcters"

Com funcionen

1. Tipus d'usuari al camp de text
2. En enviar (o mentre escriuen), l'entrada es comprova amb el patró
3. Si coincideix: La validació ha superat
4. Si no ho fa: es mostra un missatge d'error

Beneficis

• Qualitat de les dades: Assegurar formats coherents
• Prevenció d'errors: Detectar els errors aviat
• Guia d'usuari: Expectatives clares
• Compatibilitat descendent: Les dades funcionen amb altres sistemes

Patrons de validació integrats

Creador de formularis automàtic inclou patrons comuns:

Ús de patrons integrats

Pas 1: Afegir un camp de text

1. Obre el formulari a FIG
2. Arrossegar Text camp per formar
3. Feu clic per configurar

Pas 2: Seleccioneu el patró de validació

1. Cercar Patró de validació a la configuració
2. Trieu del menú desplegable:
   • Cap (sense patró)
   • Correu electrònic
   • URL
   • Només lletres
   • Només números
   • Alfanumèric
   • costum
3. Desa configuració

Pas 3: Validació de la prova

1. Formulari de previsualització
2. Prova una entrada vàlida: hauria de passar
3. Prova una entrada no vàlida; hauria de mostrar un error.

Exemples de patrons i casos d'ús

Validació d'URL

Utilitzar per:

• Camp del lloc web
• Enllaços de cartera
• Perfils de xarxes socials
• URL de referència

Exemples vàlids:

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

Exemples no vàlids:

• example.com (falta protocol)
• www.example.com (falta protocol)
• només una mica de text

Només lletres

Utilitzar per:

• Nom/cognoms (validació simple)
• Noms de ciutats
• Codis de país
• Identificadors alfabètics

Exemples vàlids:

• John
• Herrero
• NewYork

Exemples no vàlids:

• John123
• Nova York (espai)
• O'Brien (apòstrof)

Nota: L'opció només de lletres és estricta. Tingueu en compte si necessiteu espais, guions o accents.

Només números

Utilitzar per:

• números d'identificació
• Números de compte
• Quantitat (quan no s'utilitza el camp numèric)
• codis PIN

Exemples vàlids:

• 12345
• 00123
• 9876543210

Exemples no vàlids:

• 123-456 (guió)
• 123.45 (decimal)
• 12345A

Alfanumèric

Utilitzar per:

• Codis de producte
• Números de referència
• Noms d'usuari
• Números de sèrie

Exemples vàlids:

• ABC123
• Usuari42
• PROD001

Exemples no vàlids:

• ABC-123 (guió)
• ABC 123 (espai)
• ABC_123 (subratllat)

Patrons de validació personalitzats (Regex)

Què és Regex?

Les expressions regulars (regex) són patrons que descriuen formats de text:

• ^ = Inici de la cadena
• $ = Final de cadena
• [A-Z] = Qualsevol lletra majúscula
• [a-z] = Qualsevol lletra minúscula
• [0-9] = Qualsevol dígit
• {3} = Exactament 3 dels anteriors
• {2,5} = Entre 2 i 5 dels anteriors
• + = Un o més
• * = Zero o més
• ? = Opcional (zero o un)

Creació de patrons personalitzats

1. Seleccioneu "Personalitzat" al menú desplegable de validació
2. Introdueix el teu patró d'expressió regular
3. Prova amb diverses entrades

Exemples de patrons personalitzats comuns

Codi postal dels EUA

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

Valida:

• 12345 (5 dígits)
• 12345-6789 (codi postal+4)

Rebutja:

• 1234 (massa curt)
• 123456 (massa llarg)
• ABCDE (lletres)

Número de telèfon dels EUA

Patró: ^\d{3}-\d{3}-\d{4}$

Valida: 555-123-4567

Per a un format flexible: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

Valida:

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

Codi de producte (format ABC-1234)

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

Valida:

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

Rebutja:

• abc-1234 (minúscules)
• AB-1234 (només 2 lletres)
• ABC1234 (falta guionet)

Matrícula (diversos formats)

Patró (general dels EUA): ^[A-Z0-9]{1,7}$

Valida: 1-7 majúscules/números

Targeta de crèdit (format bàsic)

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

Valida:

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

Nota: Per a pagaments reals, utilitzeu els processadors de pagaments adequats amb la seva validació.

Nom d'usuari (lletres, números, subratllat)

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

Regles:

• Comença amb lletra
• De 3 a 20 caràcters en total
• Només lletres, números i subratllats

Valida: usuari_123, JohnDoe, test42

Codi de color hexadecimal

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

Valida:

• # FF5733
• #fff
• #ABC123

Data (AAAA-MM-DD)

Patró: ^\d{4}-\d{2}-\d{2}$

Valida: 2026-01-15

Nota: Per a les dates, normalment és millor utilitzar un camp Data amb un selector de dates.

Hora (HH:MM 24 hores)

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

Valida:

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

Número de factura (INV-AAAA-NNNN)

Patró: ^INV-\d{4}-\d{4}$

Valida:

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

Número de la Seguretat Social (EUA)

Patró: ^\d{3}-\d{2}-\d{4}$

Valida: 123-45-6789

Advertència: Aneu amb compte a l'hora de recollir els números de la Seguretat Social: implicacions per a la seguretat i la privadesa.

Construint els vostres propis patrons

Procés pas a pas

1. Definir requisits: Quin format necessites?
2. Trenca-ho: Quins personatges, quants, en quin ordre?
3. Patró de construcció: Tradueix a regex
4. Prova a fons: Entrades vàlides I no vàlides
5. Escriure el missatge d'error: Ajudar els usuaris a entendre el format

Exemple: ID d'empleat

requisit: 2 lletres + 4 dígits + 1 lletra (p. ex., AB1234C)

Desglossament:

• 2 lletres majúscules: [A-Z]{2}
• 4 dígits: \d{4}
• 1 lletra majúscula: [A-Z]
• Res abans ni després: ^ i $

Patró final: ^[A-Z]{2}\d{4}[A-Z]$

Patrons de prova

Abans d'utilitzar-lo en formulari:

• Prova les entrades vàlides (hauria de passar)
• Prova les entrades no vàlides (hauria de fallar)
• Casos límit de prova (límits, caràcters especials)
• Utilitzeu verificadors d'expressions regulars en línia per depurar

Missatges d'error per a la validació

Missatges predeterminats

• "Si us plau, introduïu un valor vàlid"
• "Aquest camp no és vàlid"

Millors missatges personalitzats

Indiqueu als usuaris el format esperat:

Ús del marcador de posició i del text d'ajuda

Eviteu errors mostrant el format per endavant:

• Reservat: «ABC-1234»
• Text d'ajuda: "Introduïu el codi del vostre producte (per exemple, ABC-1234)"

Millors Pràctiques

1. Inici Simple

Feu servir patrons integrats sempre que sigui possible. Les expressions regulars personalitzades afegeixen complexitat.

2. No sobrevalideu

Els patrons massa estrictes frustren els usuaris:

• Noms amb guions (Mary-Jane)
• Noms amb apòstrofs (O'Brien)
• Personatges internacionals (José, Müller)

3. Mostra el format esperat

Digues sempre als usuaris què esperes:

• Marcador de posició amb exemple
• Text d'ajuda que explica el format
• Esborra el missatge d'error

4. Casos de prova límit

• Entrada buida
• Espais al principi/final
• Personatges especials
• Longitud màxima

5. Considereu alternatives

De vegades, altres mètodes són millors:

• Dates → Utilitza el camp Data
• Números → Utilitza el camp Número
• Telèfon → Utilitza el camp Telèfon amb format
• Opcions fixes → Utilitza el menú desplegable

Combinació amb altres validacions

Patró + Obligatori

• El camp s'ha d'omplir I coincidir amb el patró
• Error en buit "obligatori"
• Patró d'errors de format incorrecte

Patró + Longitud mínima/màxima

• El patró valida el format
• La longitud valida la mida
• Tots dos han de passar

Resolució de problemes de patrons

El patró no funciona

Comproveu:

• La sintaxi és correcta (sense errors tipogràfics)
• Els caràcters especials s'han escapat correctament
• Àncores ^ i $ si cal

Entrada vàlida rebutjada

Comproveu:

• Pot ser que el patró sigui massa estricte
• Falten caràcters vàlids al patró
• Problemes de sensibilitat a majúscules i minúscules

S'accepta una entrada no vàlida

Comproveu:

• Pot ser que el patró sigui massa fluix
• Àncores que falten (^ i $)
• Prova amb més exemples

Preguntes freqüents

Puc combinar diversos patrons?

Un sol camp utilitza un patró. Per a una validació complexa, combineu els requisits en una expressió regular mitjançant l'alternança (|) o creeu el patró per coincidir amb tots els requisits.

Els patrons distingeixen entre majúscules i minúscules?

Per defecte, sí. Feu servir [A-Za-z] per trobar coincidències entre majúscules i minúscules o afegiu un indicador que no distingeix entre majúscules i minúscules si és compatible.

Com puc permetre espais?

Afegeix \s a la teva classe de personatge: [A-Za-z\s] coincideix amb lletres i espais.

I què passa amb els personatges internacionals?

L'estàndard [A-Za-z] no inclou caràcters accentuats. Per a noms internacionals, considereu una validació més flexible o utilitzeu \p{L} (si és compatible) per a qualsevol lletra.

Hauria de validar en desenfocament o enviar?

Totes dues funcionen. En cas de desenfoque (pèrdua del focus), es dóna una resposta més ràpida. En enviar, ho detecta tot. Molts formularis fan les dues coses.

resum

Afegir patrons de validació personalitzats:

1. Trieu el tipus de patró – Integrat o personalitzat
2. Configura el patró – Seleccioneu o introduïu una expressió regular
3. Afegeix un marcador de posició – Mostra el format esperat
4. Afegeix text d'ajuda – Explicar els requisits
5. Estableix el missatge d'error – Correcció de la guia
6. Prova a fons – Entrades vàlides i no vàlides

Conclusió

Els patrons de validació personalitzats garanteixen la qualitat de les dades mitjançant l'aplicació de formats específics. Tant si necessiteu validació d'URL, codis de producte o identificadors personalitzats, els patrons detecten errors abans de l'enviament i guien els usuaris per corregir l'entrada.

Creador de formularis automàtic Inclou patrons comuns (correu electrònic, URL, lletres, números, alfanumèrics) i admet expressions regulars personalitzades per a necessitats de validació especialitzades. Les dades netes comencen amb una validació adequada.

A punt per validar les entrades del formulari? Descarrega el creador de formularis automàtic i assegureu-vos que els vostres formularis recopilin dades amb el format correcte.