Modelli di convalida personalizzati per i campi di testo

A campo di testo Accetta qualsiasi cosa l'utente digiti, ma a volte sono necessari formati specifici. URL di siti web, codici prodotto, numeri di licenza o nomi composti solo da lettere: tutti questi formati hanno degli schemi che li rendono validi. Gli schemi di convalida personalizzati consentono di definire con precisione quale formato è accettabile, individuando gli errori prima dell'invio.

In questa guida imparerai come aggiungere modelli di validazione personalizzati ai campi di testo nei tuoi moduli WordPress.

Che cosa sono i modelli di validazione?

Il concetto

I modelli di validazione sono regole che definiscono quali input sono validi:

• “Deve contenere solo lettere”
• "Deve essere un URL valido"
• "Il formato deve corrispondere a ABC-1234"
• “Deve contenere esattamente 10 caratteri”

Come funzionano

1. L'utente digita nel campo di testo
2. Al momento dell'invio (o durante la digitazione), l'input viene controllato rispetto al modello.
3. Se corrisponde: la convalida è andata a buon fine.
4. Se non funziona: viene visualizzato un messaggio di errore.

Vantaggi

• Qualità dei dati: Garantire formati coerenti
• Prevenzione degli errori: Individuare gli errori in anticipo
• Istruzioni per l'utente: Aspettative chiare
• Compatibilità a valle: I dati funzionano con altri sistemi

Modelli di convalida integrati

Generatore automatico di moduli include modelli comuni:

Utilizzo di modelli predefiniti

Passaggio 1: aggiungere un campo di testo

1. Apri il tuo modulo in AFB
2. Trascinare Testo campo da formare
3. Clicca per configurare

Passaggio 2: Selezionare il modello di convalida

1. Trovate Modello di convalida nelle impostazioni
2. Seleziona dal menu a tendina:
   • Nessuno (nessuno schema)
   • E-mail
   • URL
   • Solo lettere
   • Solo numeri
   • Alfanumerico
   • Custom
3. Salva le impostazioni

Fase 3: Validazione del test

1. Modulo di anteprima
2. Prova a inserire un input valido: dovrebbe funzionare.
3. Prova con un input non valido: dovrebbe comparire un messaggio di errore.

Esempi di modelli e casi d'uso

Convalida dell'URL

Utilizzare per:

• Campo del sito web
• Link al portfolio
• Profili dei social media
• URL di riferimento

Esempi validi:

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

Esempi non validi:

• example.com (protocollo mancante)
• www.example.com (protocollo mancante)
• solo del testo

Solo lettere

Utilizzare per:

• Nome/cognome (validazione semplice)
• Nomi di città
• Codici paese
• Identificatori alfabetici

Esempi validi:

• John
• fabbro
• NewYork

Esempi non validi:

• John123
• New York (spazio)
• O'Brien (apostrofo)

Nota: È obbligatorio utilizzare solo lettere. Valuta attentamente se sono necessari spazi, trattini o accenti.

Solo numeri

Utilizzare per:

• Numeri ID
• Numeri di conto
• Quantità (quando non si utilizza il campo numerico)
• Codici PIN

Esempi validi:

• 12345
• 00123
• 9876543210

Esempi non validi:

• 123-456 (trattino)
• 123.45 (decimale)
• 12345A

Alfanumerico

Utilizzare per:

• Codici dei prodotti
• Numeri di riferimento
• Nomi utente
• Numeri seriali

Esempi validi:

• ABC123
• User42
• PROD001

Esempi non validi:

• ABC-123 (trattino)
• ABC 123 (spazio)
• ABC_123 (underscore)

Modelli di convalida personalizzati (Regex)

Cos'è Regex?

Le espressioni regolari (regex) sono modelli che descrivono i formati di testo:

• ^ = Inizio stringa
• $ = Fine della stringa
• [A-Z] = Qualsiasi lettera maiuscola
• [a-z] = Qualsiasi lettera minuscola
• [0-9] = Qualsiasi cifra
• {3} = Esattamente 3 dei precedenti
• {2,5} = Tra 2 e 5 dei precedenti
• + = Uno o più
• * = Zero o più
• ? = Opzionale (zero o uno)

Creazione di modelli personalizzati

1. Seleziona "Personalizzato" dal menu a tendina di convalida.
2. Inserisci il tuo modello regex
3. Test con vari input

Esempi comuni di modelli personalizzati

Codice postale statunitense

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

Convalida:

• 12345 (5 cifre)
• 12345-6789 (CAP+4)

Rifiuti:

• 1234 (troppo corto)
• 123456 (troppo lungo)
• ABCDE (lettere)

Numero di telefono degli Stati Uniti

Motivo: ^\d{3}-\d{3}-\d{4}$

Convalida: 555-123-4567

Per il formato flessibile: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

Convalida:

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

Codice prodotto (formato ABC-1234)

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

Convalida:

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

Rifiuti:

• abc-1234 (minuscolo)
• AB-1234 (solo 2 lettere)
• ABC1234 (trattino mancante)

Targa automobilistica (vari formati)

Modello (generale USA): ^[A-Z0-9]{1,7}$

Convalida: Da 1 a 7 lettere maiuscole/numeri

Carta di credito (formato base)

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

Convalida:

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

Nota: Per i pagamenti effettivi, utilizzare processori di pagamento appropriati e dotati delle relative certificazioni.

Nome utente (lettere, numeri, trattino basso)

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

Regole:

• Inizia con la lettera
• Da 3 a 20 caratteri in totale
• Solo lettere, numeri, trattini bassi

Convalida: utente_123, JohnDoe, test42

Codice colore esadecimale

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

Convalida:

• # FF5733
• #fff
• #ABC123

Data (AAAA-MM-GG)

Motivo: ^\d{4}-\d{2}-\d{2}$

Convalida: 2026-01-15

Nota: Per le date, di solito è meglio utilizzare un campo Data con un selettore di data.

Ora (HH:MM 24 ore)

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

Convalida:

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

Numero fattura (INV-AAAA-NNNN)

Motivo: ^INV-\d{4}-\d{4}$

Convalida:

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

Numero di previdenza sociale (USA)

Motivo: ^\d{3}-\d{2}-\d{4}$

Convalida: 123-45-6789

Attenzione: Attenzione alla raccolta dei numeri di previdenza sociale: implicazioni per la sicurezza e la privacy.

Creare i propri modelli

Procedura dettagliata

1. Definire i requisiti: Di che formato hai bisogno?
2. Scomponilo: Quali personaggi, quanti, in quale ordine?
3. Schema di costruzione: Traduci in regex
4. Prova a fondo: Input validi e non validi
5. Scrivi il messaggio di errore: Aiutare gli utenti a comprendere il formato

Esempio: ID dipendente

Requisito: 2 lettere + 4 cifre + 1 lettera (es. AB1234C)

Abbattersi:

• 2 lettere maiuscole: [A-Z]{2}
• 4 cifre: \d{4}
• 1 lettera maiuscola: [A-Z]
• Niente prima o dopo: ^ e $

Schema finale: ^[A-Z]{2}\d{4}[A-Z]$

Modelli di test

Prima di utilizzare il modulo:

• Verifica la validità degli input (il test dovrebbe avere esito positivo).
• Verifica input non validi (dovrebbe fallire)
• Testare i casi limite (confini, caratteri speciali)
• Utilizzare strumenti di test regex online per il debug

Messaggi di errore per la convalida

Messaggi predefiniti

• "Inserisci un valore valido"
• "Questo campo non è valido"

Messaggi personalizzati migliori

Indica agli utenti il ​​formato previsto:

Utilizzo di testo segnaposto e di aiuto

Previeni gli errori mostrando il formato in anticipo:

• Segnaposto: “ABC-1234”
• Testo di aiuto: Inserisci il codice prodotto (ad esempio, ABC-1234)

Best Practices

1. Inizia in modo semplice

Quando possibile, utilizza i pattern predefiniti. Le espressioni regolari personalizzate aggiungono complessità.

2. Non effettuare troppe verifiche

Gli schemi troppo rigidi frustrano gli utenti:

• Nomi con trattino (Mary-Jane)
• Nomi con apostrofi (O'Brien)
• Personaggi internazionali (José, Müller)

3. Mostra il formato previsto

Informa sempre gli utenti su cosa ti aspetti da loro:

• Segnaposto con esempio
• Testo di aiuto che spiega il formato
• Cancella il messaggio di errore

4. Testare i casi limite

• Input vuoto
• Spazi all'inizio/alla fine
• Personaggi speciali
• Lunghezza massima

5. Considera le alternative

A volte altri approcci sono migliori:

• Date → Usa il campo Data
• Numeri → Usa il campo Numero
• Telefono → Utilizza il campo Telefono con formato
• Opzioni fisse → Usa menu a tendina

Combinazione con altre validazioni

Modello + Obbligatorio

• Il campo deve essere compilato E corrispondere al modello
• Vuoto fallisce “richiesto”
• Il formato errato non rispetta lo schema

Modello + Lunghezza minima/massima

• Il modello convalida il formato
• La lunghezza convalida la dimensione
• Entrambi devono passare

Modelli di risoluzione dei problemi

Garanzia non funzionante

Dai un'occhiata:

• La sintassi è corretta (nessun errore di battitura).
• I personaggi speciali sono fuggiti correttamente
• ^ e ancoraggi $ se necessario

Input valido rifiutato

Dai un'occhiata:

• Lo schema potrebbe essere troppo rigido
• Caratteri validi mancanti nel modello
• Problemi di distinzione tra maiuscole e minuscole

Input non valido accettato

Dai un'occhiata:

• Il modello potrebbe essere troppo largo
• Ancore mancanti (^ e $)
• Prova con più esempi

Domande frequenti

Posso combinare più motivi?

Un singolo campo utilizza un solo modello. Per una convalida complessa, combina i requisiti in un'unica espressione regolare utilizzando l'alternanza (|) oppure crea un modello che corrisponda a tutti i requisiti.

I modelli fanno distinzione tra maiuscole e minuscole?

Di default, sì. Usa [A-Za-z] per abbinare entrambi i casi, oppure aggiungi il flag di distinzione tra maiuscole e minuscole se supportato.

Come faccio a lasciare degli spazi?

Aggiungi \s alla tua classe di caratteri: [A-Za-z\s] corrisponde a lettere e spazi.

Che dire dei caratteri internazionali?

L'alfabeto standard [A-Za-z] non include i caratteri accentati. Per i nomi internazionali, si consiglia una convalida meno restrittiva o l'utilizzo di \p{L} (se supportato) per qualsiasi lettera.

Devo convalidare al momento della sfocatura o inviare?

Entrambi i metodi funzionano. La funzione "al momento della sfocatura" fornisce un feedback più rapido. La funzione "al momento dell'invio" cattura tutto. Molti moduli utilizzano entrambe le funzioni.

Sintesi

Aggiunta di modelli di convalida personalizzati:

1. Scegli il tipo di modello – Integrato o personalizzato
2. Modello di configurazione – Seleziona o inserisci regex
3. Aggiungi segnaposto – Mostra il formato previsto
4. Aggiungi testo di aiuto – Spiegare i requisiti
5. Imposta messaggio di errore – Correzione della guida
6. Testare accuratamente – Input validi e non validi

Conclusione

I modelli di convalida personalizzati garantiscono la qualità dei dati imponendo formati specifici. Che si tratti di convalida degli URL, codici prodotto o identificatori personalizzati, i modelli individuano gli errori prima dell'invio e guidano gli utenti all'inserimento corretto.

Generatore automatico di moduli Include modelli comuni (email, URL, lettere, numeri, alfanumerici) e supporta espressioni regolari personalizzate per esigenze di convalida specifiche. Dati puliti iniziano con una corretta convalida.

Pronti a convalidare i dati inseriti nel modulo? Scarica Auto Form Builder e assicurati che i tuoi moduli raccolgano dati formattati correttamente.