Tilpassede valideringsmønstre for tekstfelt

A tekstfelt aksepterer alt brukere skriver inn – men noen ganger trenger du spesifikke formater. Nettadresser, produktkoder, lisensnumre eller navn med bare bokstaver har alle mønstre som gjør dem gyldige. Tilpassede valideringsmønstre lar deg definere nøyaktig hvilket format som er akseptabelt, og fange opp feil før innsending.

I denne veiledningen lærer du hvordan du legger til tilpassede valideringsmønstre i tekstfelt i WordPress-skjemaene dine.

Hva er valideringsmønstre?

Konseptet

Valideringsmønstre er regler som definerer hvilke input som er gyldige:

• «Må bare inneholde bokstaver»
• «Må være en gyldig URL»
• «Må samsvare med formatet ABC-1234»
• «Må være nøyaktig 10 tegn»

Hvordan de fungerer

1. Brukertyper i tekstfeltet
2. Ved innsending (eller mens de skriver) kontrolleres inndataene mot mønsteret
3. Hvis det samsvarer: Valideringen er bestått
4. Hvis ikke: Feilmelding vises

Fordeler

• Datakvalitet: Sørg for konsistente formater
• Feilforebygging: Oppdag feil tidlig
• Brukerveiledning: Klare forventninger
• Nedstrømskompatibilitet: Data fungerer med andre systemer

Innebygde valideringsmønstre

Automatisk skjemabygger inkluderer vanlige mønstre:

Bruk av innebygde mønstre

Trinn 1: Legg til tekstfelt

1. Åpne skjemaet ditt i A.F.B.
2. Dra tekst felt å danne
3. Klikk for å konfigurere

Trinn 2: Velg valideringsmønster

1. Finn Valideringsmønster i innstillinger
2. Velg fra rullegardinmenyen:
   • Ingen (intet mønster)
   • Epost
   • URL
   • Kun bokstaver
   • Bare tall
   • alfanumerisk
   • Custom
3. lagre innstillinger

Trinn 3: Testvalidering

1. Forhåndsvisningsskjema
2. Prøv gyldig inndata – bør bestå
3. Prøv ugyldig inndata – det skal vises feil

Mønstereksempler og brukstilfeller

URL-validering

Bruke til:

• Nettstedsfelt
• Porteføljelenker
• Profiler på sosiale medier
• Referanse-URL-er

Gyldige eksempler:

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

Ugyldige eksempler:

• example.com (mangler protokoll)
• www.example.com (mangler protokoll)
• bare litt tekst

Kun bokstaver

Bruke til:

• Fornavn/etternavn (enkel validering)
• Bynavn
• Landskoder
• Alfabetiske identifikatorer

Gyldige eksempler:

• John
• Smith
• NewYork

Ugyldige eksempler:

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

OBS: Kun bokstaver er strengt tatt nødvendig. Vurder om du trenger mellomrom, bindestreker eller aksenter.

Bare tall

Bruke til:

• ID-nummer
• Kontonumre
• Antall (når tallfeltet ikke brukes)
• PIN-koder

Gyldige eksempler:

• 12345
• 00123
• 9876543210

Ugyldige eksempler:

• 123–456 (bindestrek)
• 123.45 (desimal)
• 12345A

alfanumerisk

Bruke til:

• Produktkoder
• Referansenummer
• brukernavn
• Serienummer

Gyldige eksempler:

• ABC123
• User42
• PROD001

Ugyldige eksempler:

• ABC-123 (bindestrek)
• ABC 123 (mellomrom)
• ABC_123 (understrek)

Tilpassede valideringsmønstre (Regex)

Hva er Regex?

Regulære uttrykk (regex) er mønstre som beskriver tekstformater:

• ^ = Starten av strengen
• $ = Slutt på strengen
• [A-Z] = Enhver stor bokstav
• [a-z] = Enhver liten bokstav
• [0-9] = Hvilket som helst siffer
• {3} = Nøyaktig 3 av forrige
• {2,5} = Mellom 2 og 5 av forrige
• + = En eller flere
• * = Null eller mer
• ? = Valgfritt (null eller én)

Lage tilpassede mønstre

1. Velg «Tilpasset» fra rullegardinmenyen for validering
2. Skriv inn regex-mønsteret ditt
3. Test med forskjellige innganger

Eksempler på vanlige tilpassede mønstre

Amerikansk postnummer

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

Validerer:

• 12345 (5 sifre)
• 12345-6789 (postnummer +4)

Avviser:

• 1234 (for kort)
• 123456 (for lang)
• ABCDE (bokstaver)

Telefonnummer i USA

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

Avviser:

• abc-1234 (små bokstaver)
• AB-1234 (kun 2 bokstaver)
• ABC1234 (mangler bindestrek)

Nummerplate (forskjellige formater)

Mønster (generelt i USA): ^[A-Z0-9]{1,7}$

Validerer: 1–7 store bokstaver/tall

Kredittkort (grunnformat)

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

Validerer:

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

OBS: For faktiske betalinger, bruk riktige betalingsbehandlere med validering.

Brukernavn (bokstaver, tall, understrek)

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

regler:

• Starter med bokstav
• 3–20 tegn totalt
• Bare bokstaver, tall og understrek

Validerer: bruker_123, JohnDoe, test42

Heksadesimal fargekode

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

OBS: For datoer er det vanligvis bedre å bruke et datofelt med datovelger.

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:

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

Personnummer (USA)

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

Validerer: 123-45-6789

Advarsel: Vær forsiktig med å samle inn personnummer – sikkerhets- og personvernmessige konsekvenser.

Bygg dine egne mønstre

Trinnvis prosess

1. Definer krav: Hvilket format trenger du?
2. Bryte det ned: Hvilke karakterer, hvor mange, i hvilken rekkefølge?
3. Byggemønster: Oversett til regex
4. Test grundig: Gyldige OG ugyldige inndata
5. Skriv feilmelding: Hjelp brukerne å forstå formatet

Eksempel: Ansatt-ID

Krav: 2 bokstaver + 4 sifre + 1 bokstav (f.eks. AB1234C)

Sammenbrudd:

• 2 store bokstaver: [A-Z]{2}
• 4 sifre: \d{4}
• 1 stor bokstav: [A-Z]
• Ingenting før eller etter: ^ og $

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

Testmønstre

Før bruk i form:

• Test gyldige inndata (bør bestå)
• Test ugyldige inndata (bør mislykkes)
• Test av kanttilfeller (grenser, spesialtegn)
• Bruk online regex-testere til feilsøking

Feilmeldinger for validering

Standardmeldinger

• "Vennligst skriv inn en gyldig verdi"
• «Dette feltet er ugyldig»

Bedre tilpassede meldinger

Fortell brukerne det forventede formatet:

Bruk av plassholder og hjelpetekst

Forhindre feil ved å vise formatet på forhånd:

• Plassholder: «ABC-1234»
• Hjelpetekst: «Skriv inn produktkoden din (f.eks. ABC-1234)»

Beste praksis

1. Start enkelt

Bruk innebygde mønstre når det er mulig. Tilpasset regex øker kompleksiteten.

2. Ikke overvalider

Altfor strenge mønstre frustrerer brukere:

• Navn med bindestreker (Mary-Jane)
• Navn med apostrofer (O'Brien)
• Internasjonale karakterer (José, Müller)

3. Vis forventet format

Fortell alltid brukerne hva du forventer:

• Plassholder med eksempel
• Hjelpetekst som forklarer formatet
• Fjern feilmeldingen

4. Testkanttilfeller

• Tom inndata
• Mellomrom ved start/slutt
• Spesielle karakterer
• Maksimal lengde

5. Vurder alternativer

Noen ganger er andre tilnærminger bedre:

• Datoer → Bruk datofeltet
• Tall → Bruk tallfeltet
• Telefon → Bruk telefonfeltet med format
• Faste alternativer → Bruk rullegardinmeny

Kombinering med annen validering

Mønster + Obligatorisk

• Feltet må fylles ut OG samsvare med mønsteret
• Tom feilmelding «påkrevd»
• Feil formatering mislykkes mønster

Mønster + Min./Maks. Lengde

• Mønster validerer format
• Lengde bekrefter størrelse
• Begge må bestå

Feilsøkingsmønstre

Mønsteret fungerer ikke

Kryss av:

• Syntaksen er korrekt (ingen skrivefeil)
• Spesialtegnene escaped på riktig måte
• ^ og $ ankere om nødvendig

Gyldig inndata blir avvist

Kryss av:

• Mønsteret kan være for strengt
• Mangler gyldige tegn i mønsteret
• Problemer med å skille mellom store og små bokstaver

Ugyldig inndata blir akseptert

Kryss av:

• Mønsteret kan være for løst
• Manglende ankere (^ og $)
• Test med flere eksempler

Ofte Stilte Spørsmål

Kan jeg kombinere flere mønstre?

Et enkelt felt bruker ett mønster. For kompleks validering, kombiner krav i én regex ved hjelp av alternering (|) eller opprett mønsteret slik at det samsvarer med alle krav.

Skiller mønstre mellom store og små bokstaver?

Som standard er det ja. Bruk [A-Za-z] for å matche begge deler, eller legg til et flagg som ikke skiller mellom store og små bokstaver hvis det støttes.

Hvordan tillater jeg mellomrom?

Legg til \s i karakterklassen din: [A-Za-z\s] matcher bokstaver og mellomrom.

Hva med internasjonale karakterer?

Standard [A-Za-z] inkluderer ikke aksenttegn. For internasjonale navn bør du vurdere løsere validering eller bruke \p{L} (hvis støttet) for alle bokstaver.

Bør jeg validere ved uskarphet eller sende inn?

Begge deler fungerer. Ved uskarphet (mister fokus) får man raskere tilbakemelding. Ved innsending fanger man opp alt. Mange skjemaer gjør begge deler.

Sammendrag

Legge til tilpassede valideringsmønstre:

1. Velg mønstertype – Innebygd eller spesialtilpasset
2. Konfigurer mønster – Velg eller skriv inn regex
3. Legg til plassholder – Vis forventet format
4. Legg til hjelpetekst – Forklar kravene
5. Angi feilmelding – Guidekorrigering
6. Test grundig – Gyldige og ugyldige inndata

Konklusjon

Tilpassede valideringsmønstre sikrer datakvalitet ved å håndheve spesifikke formater. Enten du trenger URL-validering, produktkoder eller tilpassede identifikatorer, fanger mønstre opp feil før innsending og veileder brukerne til riktig inndata.

Automatisk skjemabygger inkluderer vanlige mønstre (e-post, URL, bokstaver, tall, alfanumerisk) og støtter tilpasset regex for spesialiserte valideringsbehov. Rene data starter med riktig validering.

Klar til å validere skjemainndataene dine? Last ned automatisk skjemabygger og sørg for at skjemaene dine samler inn riktig formaterte data.