Brugerdefinerede valideringsmønstre for tekstfelter

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

  1. Brugertyper i tekstfeltet
  2. Ved afsendelse (eller mens de skriver) kontrolleres inputtet mod mønsteret
  3. Hvis det matcher: Valideringen er bestået
  4. 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-mail 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

  1. Åbn din formular i A.F.B.
  2. Træk tekst felt at danne
  3. Klik for at konfigurere

Trin 2: Vælg valideringsmønster

  1. Finde Valideringsmønster i indstillinger
  2. Vælg fra rullemenuen:
    • Ingen (intet mønster)
    • E-mail
    • URL
    • Kun bogstaver
    • Kun tal
    • alfanumerisk
    • Tilpasset
  3. Gem indstillinger

Trin 3: Testvalidering

  1. Forhåndsvisningsformular
  2. Prøv gyldigt input – burde bestå
  3. 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

  1. Vælg "Brugerdefineret" fra valideringsrullemenuen
  2. Indtast dit regex-mønster
  3. 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

  1. Definer krav: Hvilket format har du brug for?
  2. Bryd det ned: Hvilke karakterer, hvor mange, i hvilken rækkefølge?
  3. Byggemønster: Oversæt til regex
  4. Test grundigt: Gyldige OG ugyldige input
  5. 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:

  1. Vælg mønstertype – Indbygget eller specialfremstillet
  2. Konfigurer mønster – Vælg eller indtast regex
  3. Tilføj pladsholder – Vis forventet format
  4. Tilføj hjælpetekst – Forklar kravene
  5. Angiv fejlmeddelelse – Guidekorrektion
  6. 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.

Giv en kommentar

Din e-mail adresse vil ikke blive offentliggjort. Krævede felter er markeret *