Brugerdefinerede valideringsmønstre for tekstfelter
A tekstfelt accepterer alt, hvad brugerne skriver – men nogle gange har du brug for specifikke formater. Webadresser, produktkoder, licensnumre eller navne, der kun består af bogstaver, har alle mønstre, der gør dem gyldige. Brugerdefinerede valideringsmønstre giver dig mulighed for at definere præcis, hvilket format der er acceptabelt, og fange fejl før indsendelse.
I denne guide lærer du, hvordan du tilføjer brugerdefinerede valideringsmønstre til tekstfelter i dine WordPress-formularer.
Hvad er valideringsmønstre?
Konceptet
Valideringsmønstre er regler, der definerer, hvilket input der er gyldigt:
- "Må kun indeholde bogstaver"
- "Skal være en gyldig URL"
- "Skal matche formatet ABC-1234"
- "Skal være præcis 10 tegn"
Hvordan de arbejder
- Brugertyper i tekstfeltet
- Ved afsendelse (eller mens de skriver) kontrolleres inputtet mod mønsteret
- Hvis det matcher: Valideringen er bestået
- Hvis ikke: Vises en fejlmeddelelse
Fordele
- Datakvalitet: Sørg for ensartede formater
- Fejlforebyggelse: Opdag fejl tidligt
- Brugervejledning: Klare forventninger
- Downstream-kompatibilitet: Data fungerer sammen med andre systemer
Indbyggede valideringsmønstre
Automatisk formularbygger inkluderer almindelige mønstre:
| Mønster | Validerer | Eksempel på gyldig input |
|---|---|---|
| E-mailadresseformat | [e-mail beskyttet] | |
| URL | Websteds URL'er | https://example.com |
| Kun bogstaver | AZ, kun AZ | John Smith |
| Kun tal | Kun 0-9 | 12345 |
| alfanumerisk | Bogstaver og tal | ABC123 |
| Tilpasset | Dit eget regex-mønster | (afhænger af mønsteret) |
Brug af indbyggede mønstre
Trin 1: Tilføj tekstfelt
- Åbn din formular i A.F.B.
- Træk tekst felt at danne
- Klik for at konfigurere
Trin 2: Vælg valideringsmønster
- Finde Valideringsmønster i indstillinger
- Vælg fra rullemenuen:
- Ingen (intet mønster)
- URL
- Kun bogstaver
- Kun tal
- alfanumerisk
- Tilpasset
- Gem indstillinger
Trin 3: Testvalidering
- Forhåndsvisningsformular
- Prøv gyldigt input – burde bestå
- Prøv ugyldigt input – burde vise fejl
Mønstereksempler og brugsscenarier
URL-validering
Brugt til:
- Webstedsfelt
- Porteføljelinks
- Profiler på sociale medier
- Reference-URL'er
Gyldige eksempler:
- https://example.com
- http://www.example.com/page
- https://example.com/path?query=value
Ugyldige eksempler:
- example.com (mangler protokol)
- www.example.com (mangler protokol)
- bare noget tekst
Kun bogstaver
Brugt til:
- For-/efternavne (simpel validering)
- Bynavne
- Landekoder
- Alfabetiske identifikatorer
Gyldige eksempler:
- John
- Smith
- NewYork
Ugyldige eksempler:
- John123
- New York (rummet)
- O'Brien (apostrof)
Bemærk: Kun bogstaver er strengt taget et krav. Overvej om du har brug for mellemrum, bindestreger eller accenter.
Kun tal
Brugt til:
- ID-numre
- Kontonumre
- Antal (når talfeltet ikke bruges)
- PIN-koder
Gyldige eksempler:
- 12345
- 00123
- 9876543210
Ugyldige eksempler:
- 123-456 (bindestreg)
- 123.45 (decimal)
- 12345A
alfanumerisk
Brugt til:
- Produktkoder
- Referencenumre
- Brugernavne
- Serienumre
Gyldige eksempler:
- ABC123
- User42
- PROD001
Ugyldige eksempler:
- ABC-123 (bindestreg)
- ABC 123 (mellemrum)
- ABC_123 (understregning)
Brugerdefinerede valideringsmønstre (Regex)
Hvad er Regex?
Regulære udtryk (regex) er mønstre, der beskriver tekstformater:
^= Start af streng$= Slut på streng[A-Z]= Ethvert stort bogstav[a-z]= Ethvert lille bogstav[0-9]= Ethvert ciffer{3}= Præcis 3 af foregående{2,5}= Mellem 2 og 5 af foregående+= En eller flere*= Nul eller mere?= Valgfri (nul eller én)
Oprettelse af brugerdefinerede mønstre
- Vælg "Brugerdefineret" fra valideringsrullemenuen
- Indtast dit regex-mønster
- Test med forskellige input
Eksempler på almindelige brugerdefinerede mønstre
Amerikansk postnummer
Mønster: ^\d{5}(-\d{4})?$
Validerer:
- 12345 (5 cifre)
- 12345-6789 (Postnummer +4)
Afviser:
- 1234 (for kort)
- 123456 (for lang)
- ABCDE (bogstaver)
amerikansk telefonnummer
Mønster: ^\d{3}-\d{3}-\d{4}$
Validerer: 555-123-4567
For fleksibelt format: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$
Validerer:
- 555-123-4567
- (555) 123-4567
- 555.123.4567
- +555 123 4567
Produktkode (ABC-1234-format)
Mønster: ^[A-Z]{3}-\d{4}$
Validerer:
- ABC-1234
- XYZ-9999
- PRO 0001
Afviser:
- abc-1234 (små bogstaver)
- AB-1234 (kun 2 bogstaver)
- ABC1234 (mangler bindestreg)
Nummerplade (forskellige formater)
Mønster (generelt i USA): ^[A-Z0-9]{1,7}$
Validerer: 1-7 store bogstaver/tal
Kreditkort (grundlæggende format)
Mønster: ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$
Validerer:
- 1234567890123456
- 1234 5678 9012 3456
- 1234-5678-9012-3456
Bemærk: Brug de korrekte betalingsudbydere med validering til faktiske betalinger.
Brugernavn (bogstaver, tal, understregning)
Mønster: ^[a-zA-Z][a-zA-Z0-9_]{2,19}$
Regler:
- Starter med bogstav
- 3-20 tegn i alt
- Kun bogstaver, tal og understregning
Validerer: bruger_123, JohnDoe, test42
Hex farvekode
Mønster: ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
Validerer:
- # FF5733
- #fff
- #ABC123
Dato (ÅÅÅÅ-MM-DD)
Mønster: ^\d{4}-\d{2}-\d{2}$
Validerer: 2026-01-15
Bemærk: For datoer er det normalt bedre at bruge et datofelt med datovælger.
Tid (TT:MM 24 timer)
Mønster: ^([01]\d|2[0-3]):[0-5]\d$
Validerer:
- 09:30
- 14:45
- 23:59
Fakturanummer (FAKTURA-ÅÅÅÅ-NNNN)
Mønster: ^INV-\d{4}-\d{4}$
Validerer:
- FAKTURA-2026-0001
- FAKTURA-2025-1234
CPR-nummer (USA)
Mønster: ^\d{3}-\d{2}-\d{4}$
Validerer: 123-45-6789
Advarsel: Vær forsigtig med at indsamle CPR-numre – sikkerheds- og privatlivsmæssige konsekvenser.
Byg dine egne mønstre
Trin-for-trin proces
- Definer krav: Hvilket format har du brug for?
- Bryd det ned: Hvilke karakterer, hvor mange, i hvilken rækkefølge?
- Byggemønster: Oversæt til regex
- Test grundigt: Gyldige OG ugyldige input
- Skriv fejlmeddelelse: Hjælp brugerne med at forstå formatet
Eksempel: Medarbejder-ID
Krav: 2 bogstaver + 4 cifre + 1 bogstav (f.eks. AB1234C)
Sammenbrud:
- 2 store bogstaver:
[A-Z]{2} - 4 cifre:
\d{4} - 1 stort bogstav:
[A-Z] - Intet før eller efter:
^og$
Endeligt mønster: ^[A-Z]{2}\d{4}[A-Z]$
Testmønstre
Før brug i form:
- Test gyldige input (bør bestå)
- Test ugyldige input (bør fejle)
- Test af kanttilfælde (grænser, specialtegn)
- Brug online regex-testere til fejlfinding
Fejlmeddelelser til validering
Standardmeddelelser
- "Indtast venligst en gyldig værdi"
- "Dette felt er ugyldigt"
Bedre brugerdefinerede beskeder
Fortæl brugerne det forventede format:
| Mønster | Bedre fejlmeddelelse |
|---|---|
| Postnummer | "Indtast venligst et gyldigt postnummer (f.eks. 12345 eller 12345-6789)" |
| Phone | "Indtast venligst telefonnummeret 555-123-4567" |
| Produktkode | "Format: ABC-1234 (3 bogstaver, bindestreg, 4 tal)" |
| Brugernavn | "Brugernavnet skal starte med et bogstav, 3-20 tegn, kun bogstaver/tal/understregning" |
Brug af pladsholdere og hjælpetekst
Forebyg fejl ved at vise formatet på forhånd:
- Pladsholder: "ABC-1234"
- Hjælpetekst: "Indtast din produktkode (f.eks. ABC-1234)"
Best Practices
1. Start Simpelt
Brug indbyggede mønstre, når det er muligt. Brugerdefineret regex øger kompleksiteten.
2. Overvalider ikke
Alt for strenge mønstre frustrerer brugerne:
- Navne med bindestreger (Mary-Jane)
- Navne med apostroffer (O'Brien)
- Internationale karakterer (José, Müller)
3. Vis forventet format
Fortæl altid brugerne, hvad du forventer:
- Pladsholder med eksempel
- Hjælpetekst, der forklarer formatet
- Ryd fejlmeddelelse
4. Testkantssager
- Tom indtastning
- Mellemrum i start/slut
- Særlige tegn
- Maksimal længde
5. Overvej alternativer
Nogle gange er andre tilgange bedre:
- Datoer → Brug datofelt
- Tal → Brug talfeltet
- Telefon → Brug telefonfelt med format
- Faste indstillinger → Brug rullemenu
Kombinering med anden validering
Mønster + Påkrævet
- Feltet skal udfyldes OG matche mønsteret
- Tomme fejl "påkrævet"
- Forkert format fejler mønster
Mønster + Min./Maks. Længde
- Mønster validerer format
- Længde validerer størrelse
- Begge skal bestå
Fejlfindingsmønstre
Mønsteret virker ikke
Kontrollere:
- Syntaksen er korrekt (ingen stavefejl)
- Specialtegn escaped korrekt
- ^ og $ ankre om nødvendigt
Gyldigt input afvises
Kontrollere:
- Mønsteret kan være for strengt
- Mangler gyldige tegn i mønsteret
- Problemer med forskellen på store og små bogstaver
Ugyldig input accepteres
Kontrollere:
- Mønsteret kan være for løst
- Manglende ankre (^ og $)
- Test med flere eksempler
Ofte stillede spørgsmål
Kan jeg kombinere flere mønstre?
Et enkelt felt bruger ét mønster. For kompleks validering kan du kombinere krav i én regex ved hjælp af alternering (|), eller oprette mønsteret, så det matcher alle krav.
Er mønstre store og små bogstaverfølsomme?
Som standard ja. Brug [A-Za-z] til at matche begge dele, eller tilføj et flag, der ikke skelner mellem store og små bogstaver, hvis det understøttes.
Hvordan tillader jeg mellemrum?
Tilføj \s til din karakterklasse: [A-Za-z\s] matcher bogstaver og mellemrum.
Hvad med internationale karakterer?
Standard [A-Za-z] inkluderer ikke tegn med accent. For internationale navne bør du overveje en løsere validering eller bruge \p{L} (hvis det understøttes) til ethvert bogstav.
Skal jeg validere ved sløring eller indsende?
Begge dele virker. Ved sløring (mister fokus) giver det hurtigere feedback. Ved afsendelse fanger det alt. Mange formularer gør begge dele.
Resumé
Tilføjelse af brugerdefinerede valideringsmønstre:
- Vælg mønstertype – Indbygget eller specialfremstillet
- Konfigurer mønster – Vælg eller indtast regex
- Tilføj pladsholder – Vis forventet format
- Tilføj hjælpetekst – Forklar kravene
- Angiv fejlmeddelelse – Guidekorrektion
- Test grundigt – Gyldige og ugyldige input
Konklusion
Brugerdefinerede valideringsmønstre sikrer datakvalitet ved at håndhæve specifikke formater. Uanset om du har brug for URL-validering, produktkoder eller brugerdefinerede identifikatorer, fanger mønstre fejl før indsendelse og guider brugerne til korrekt input.
Automatisk formularbygger inkluderer almindelige mønstre (e-mail, URL, bogstaver, tal, alfanumerisk) og understøtter brugerdefineret regex til specialiserede valideringsbehov. Rene data starter med korrekt validering.
Klar til at validere dine formularindtastninger? Download automatisk formularbygger og sørg for, at dine formularer indsamler korrekt formaterede data.