Anpassade valideringsmönster för textfält

A textfält accepterar allt användare skriver – men ibland behöver du specifika format. Webbadresser, produktkoder, licensnummer eller namn som bara består av bokstäver har alla mönster som gör dem giltiga. Anpassade valideringsmönster låter dig definiera exakt vilket format som är acceptabelt och fånga upp fel innan de skickas in.

I den här guiden lär du dig hur du lägger till anpassade valideringsmönster i textfält i dina WordPress-formulär.

Vad är valideringsmönster?

Konceptet

Valideringsmönster är regler som definierar vilken indata som är giltig:

• "Får endast innehålla bokstäver"
• "Måste vara en giltig URL"
• "Måste matcha formatet ABC-1234"
• "Måste vara exakt 10 tecken"

Hur de arbetar

1. Användartyper i textfält
2. Vid inskickning (eller medan de skriver) kontrolleras inmatningen mot mönstret
3. Om det matchar: Valideringen är godkänd
4. Om inte: Felmeddelande visas

Fördelar

• Datakvalitet: Säkerställ enhetliga format
• Felförebyggande: Upptäck misstag tidigt
• Användarhandledning: Tydliga förväntningar
• Nedströmskompatibilitet: Data fungerar med andra system

Inbyggda valideringsmönster

Automatisk formulärbyggare inkluderar vanliga mönster:

Använda inbyggda mönster

Steg 1: Lägg till textfält

1. Öppna ditt formulär i A.F.B.
2. Dra text fält att bilda
3. Klicka för att konfigurera

Steg 2: Välj valideringsmönster

1. Hitta Valideringsmönster i inställningar
2. Välj från rullgardinsmenyn:
   • Ingen (inget mönster)
   • E-post
   • URL
   • Endast bokstäver
   • Endast siffror
   • alfanumerisk
   • Custom
3. Spara inställningar

Steg 3: Testvalidering

1. Förhandsgranskningsformulär
2. Försök med giltig inmatning – borde godkännas
3. Försök med ogiltig inmatning – det borde visa felmeddelande

Mönsterexempel och användningsfall

URL-validering

Använda för:

• Webbplatsfält
• Portfolio-länkar
• Profiler på sociala medier
• Referens-URL:er

Giltiga exempel:

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

Ogiltiga exempel:

• exempel.com (saknas protokoll)
• www.example.com (saknas protokoll)
• bara lite text

Endast bokstäver

Använda för:

• För-/efternamn (enkel validering)
• Stadsnamn
• Landskoder
• Alfabetiska identifierare

Giltiga exempel:

• John
• Smith
• NewYork

Ogiltiga exempel:

• John123
• New York (rymden)
• O'Brien (apostrof)

Obs: Endast bokstäver är strikt. Överväg om du behöver mellanslag, bindestreck eller accenter.

Endast siffror

Använda för:

• ID-nummer
• Kontonummer
• Antal (när numeriskt fält inte används)
• PIN-koder

Giltiga exempel:

• 12345
• 00123
• 9876543210

Ogiltiga exempel:

• 123-456 (bindestreck)
• 123.45 (decimaltal)
• 12345A

alfanumerisk

Använda för:

• Produktkoder
• Referensnummer
• användarnamn
• Serie nummer

Giltiga exempel:

• ABC123
• User42
• PROD001

Ogiltiga exempel:

• ABC-123 (bindestreck)
• ABC 123 (mellanslag)
• ABC_123 (understreck)

Anpassade valideringsmönster (Regex)

Vad är Regex?

Reguljära uttryck (regex) är mönster som beskriver textformat:

• ^ = Början av sträng
• $ = Slut på strängen
• [A-Z] = Valfri stor bokstav
• [a-z] = Valfri liten bokstav
• [0-9] = Valfri siffra
• {3} = Exakt 3 av föregående
• {2,5} = Mellan 2 och 5 av föregående
• + = En eller flera
• * = Noll eller mer
• ? = Valfritt (noll eller ett)

Skapa anpassade mönster

1. Välj "Anpassad" från valideringsmenyn
2. Ange ditt regex-mönster
3. Testa med olika ingångar

Vanliga exempel på anpassade mönster

Amerikanskt postnummer

Mönster: ^\d{5}(-\d{4})?$

Validerar:

• 12345 (5 siffror)
• 12345-6789 (Postnummer +4)

Avvisar:

• 1234 (för kort)
• 123456 (för lång)
• ABCDE (bokstäver)

USA: s telefonnummer

Mönster: ^\d{3}-\d{3}-\d{4}$

Validerar: 555-123-4567

För flexibelt format: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

Validerar:

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

Produktkod (ABC-1234-format)

Mönster: ^[A-Z]{3}-\d{4}$

Validerar:

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

Avvisar:

• abc-1234 (gemener)
• AB-1234 (endast 2 bokstäver)
• ABC1234 (saknar bindestreck)

Registreringsskylt (olika format)

Mönster (allmänt i USA): ^[A-Z0-9]{1,7}$

Validerar: 1–7 versaler/siffror

Kreditkort (grundformat)

Mönster: ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$

Validerar:

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

Obs: För faktiska betalningar, använd lämpliga betalningsleverantörer med deras validering.

Användarnamn (bokstäver, siffror, understreck)

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

regler:

• Börjar med bokstav
• 3–20 tecken totalt
• Endast bokstäver, siffror, understreck

Validerar: användare_123, JohnDoe, test42

Hexfärgkod

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

Validerar:

• # FF5733
• #fff
• #ABC123

Datum (ÅÅÅÅ-MM-DD)

Mönster: ^\d{4}-\d{2}-\d{2}$

Validerar: 2026-01-15

Obs: För datum är det vanligtvis bättre att använda ett datumfält med datumväljare.

Tid (TT:MM 24 timmar)

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

Validerar:

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

Fakturanummer (FAKTURA-ÅÅÅÅ-NNNN)

Mönster: ^INV-\d{4}-\d{4}$

Validerar:

• FAKTURA-2026-0001
• FAKTURA-2025-1234

Personnummer (USA)

Mönster: ^\d{3}-\d{2}-\d{4}$

Validerar: 123-45-6789

Varning: Var försiktig med att samla in personnummer – säkerhets- och integritetskonsekvenser.

Bygga dina egna mönster

Steg-för-steg-process

1. Definiera krav: Vilket format behöver du?
2. Bryt ner det: Vilka karaktärer, hur många, i vilken ordning?
3. Byggmönster: Översätt till regex
4. Testa noggrant: Giltiga OCH ogiltiga inmatningar
5. Skriv felmeddelande: Hjälp användarna att förstå formatet

Exempel: Anställds-ID

Krav: 2 bokstäver + 4 siffror + 1 bokstav (t.ex. AB1234C)

Bryta ner:

• 2 versaler: [A-Z]{2}
• 4 siffror: \d{4}
• 1 stor bokstav: [A-Z]
• Inget före eller efter: ^ och $

Slutligt mönster: ^[A-Z]{2}\d{4}[A-Z]$

Testmönster

Innan användning i formulär:

• Testa giltiga indata (bör godkännas)
• Testa ogiltiga indata (borde misslyckas)
• Testa kantfall (gränser, specialtecken)
• Använd online regex-testare för att felsöka

Felmeddelanden för validering

Standardmeddelanden

• "Ange ett giltigt värde"
• "Det här fältet är ogiltigt"

Bättre anpassade meddelanden

Berätta för användarna vilket format som förväntas:

Använda platshållare och hjälptext

Förhindra fel genom att visa formatet i förväg:

• Platshållare: "ABC-1234"
• Hjälptext: "Ange din produktkod (t.ex. ABC-1234)"

Best Practices

1. Börja enkelt

Använd inbyggda mönster när det är möjligt. Anpassad regex ökar komplexiteten.

2. Övervalidera inte

Alltför strikta mönster frustrerar användare:

• Namn med bindestreck (Mary-Jane)
• Namn med apostrofer (O'Brien)
• Internationella karaktärer (José, Müller)

3. Visa förväntat format

Berätta alltid för användarna vad du förväntar dig:

• Platshållare med exempel
• Hjälptext som förklarar formatet
• Rensa felmeddelandet

4. Testa kantfall

• Tom inmatning
• Mellanrum i början/slutet
• Speciella karaktärer
• Maximal längd

5. Överväg alternativ

Ibland är andra metoder bättre:

• Datum → Använd datumfältet
• Nummer → Använd nummerfältet
• Telefon → Använd telefonfält med format
• Fasta alternativ → Använd rullgardinsmeny

Kombinera med annan validering

Mönster + Obligatoriskt

• Fältet måste fyllas i OCH matcha mönstret
• Tomma felmeddelanden "krävs"
• Fel format misslyckas mönster

Mönster + Min/Max Längd

• Mönster validerar format
• Längd validerar storlek
• Båda måste klara

Felsökningsmönster

Mönstret fungerar inte

Kolla upp:

• Syntaxen är korrekt (inga stavfel)
• Specialtecken escaped korrekt
• ^ och $ ankare om det behövs

Giltig inmatning avvisas

Kolla upp:

• Mönstret kan vara för strikt
• Giltiga tecken saknas i mönstret
• Problem med gemener och versaler

Ogiltig inmatning accepteras

Kolla upp:

• Mönstret kan vara för löst
• Saknade ankare (^ och $)
• Testa med fler exempel

Vanliga frågor

Kan jag kombinera flera mönster?

Ett enda fält använder ett mönster. För komplex validering, kombinera krav i ett regex med hjälp av alternering (|) eller skapa mönstret så att det matchar alla krav.

Är mönster skiftlägeskänsliga?

Som standard är det ja. Använd [A-Za-z] för att matcha båda skiftlägena, eller lägg till en flagga som inte är skiftlägeskänslig om det stöds.

Hur tillåter jag mellanslag?

Lägg till \s till din karaktärsklass: [A-Za-z\s] matchar bokstäver och mellanslag.

Vad gäller internationella karaktärer?

Standard [A-Za-z] inkluderar inte accenttecken. För internationella namn, överväg lösare validering eller använd \p{L} (om det stöds) för alla bokstäver.

Ska jag validera vid oskärpa eller skicka in?

Båda fungerar. Vid oskärpa (förlorar fokus) ger det snabbare feedback. Vid inskick fångar det allt. Många formulär gör båda.

Sammanfattning

Lägga till anpassade valideringsmönster:

1. Välj mönstertyp – Inbyggd eller specialanpassad
2. Konfigurera mönster – Välj eller ange regex
3. Lägg till platshållare – Visa förväntat format
4. Lägg till hjälptext – Förklara kraven
5. Ställ in felmeddelande – Guidekorrigering
6. Testa noggrant – Giltiga och ogiltiga inmatningar

Slutsats

Anpassade valideringsmönster säkerställer datakvalitet genom att tillämpa specifika format. Oavsett om du behöver URL-validering, produktkoder eller anpassade identifierare, upptäcker mönster fel innan de skickas in och vägleder användarna till korrekt inmatning.

Automatisk formulärbyggare inkluderar vanliga mönster (e-post, URL, bokstäver, siffror, alfanumeriska mönster) och stöder anpassad regex för specialiserade valideringsbehov. Ren data börjar med korrekt validering.

Redo att validera dina formulärinmatningar? Ladda ner automatisk formulärbyggare och se till att dina formulär samlar in korrekt formaterad data.