Aangepaste validatiepatronen voor tekstvelden

A tekstveld Het accepteert alles wat gebruikers typen, maar soms zijn specifieke formaten vereist. Website-URL's, productcodes, licentienummers of namen die alleen uit letters bestaan, hebben allemaal patronen die ze geldig maken. Met aangepaste validatiepatronen kunt u precies definiëren welk formaat acceptabel is, waardoor fouten worden opgespoord voordat het formulier wordt verzonden.

In deze handleiding leer je hoe je aangepaste validatiepatronen kunt toevoegen aan tekstvelden in je WordPress-formulieren.

Wat zijn validatiepatronen?

Het concept

Validatiepatronen zijn regels die bepalen welke invoer geldig is:

• “Mag alleen letters bevatten”
• "Dit moet een geldige URL zijn"
• “Moet overeenkomen met formaat ABC-1234”
• “Moet precies 10 tekens lang zijn”

Hoe werken ze?

1. De gebruiker typt in het tekstveld.
2. Bij het verzenden (of tijdens het typen) wordt de invoer gecontroleerd aan de hand van een patroon.
3. Als het overeenkomt: Validatie geslaagd
4. Als dat niet het geval is: Er wordt een foutmelding weergegeven

Voordelen:

• Data kwaliteit: Zorg voor consistente formaten.
• Foutpreventie: Ontdek fouten vroegtijdig
• Gebruikershandleiding: Duidelijke verwachtingen
• Compatibiliteit met downstream-systemen: Gegevens werken samen met andere systemen.

Ingebouwde validatiepatronen

Auto Form Builder Bevat veelvoorkomende patronen:

Gebruikmaken van ingebouwde patronen

Stap 1: Voeg een tekstveld toe

1. Open uw formulier in AFB
2. Slepen Tekst veld om te vormen
3. Klik om te configureren

Stap 2: Selecteer een validatiepatroon

1. Find Validatiepatroon in instellingen
2. Kies uit het keuzemenu:
   • Geen (geen patroon)
   • E-mail
   • URL
   • Alleen brieven
   • Alleen getallen
   • alfanumerieke
   • Op Maat
3. Instellingen opslaan

Stap 3: Testvalidatie

1. Voorbeeldformulier
2. Probeer geldige invoer — zou moeten werken
3. Probeer ongeldige invoer - zou een foutmelding moeten weergeven.

Voorbeelden van patronen en gebruiksscenario's

URL-validatie

Gebruik voor:

• Websiteveld
• Portfolio-links
• Social media-profielen
• Referentie-URL's

Geldige voorbeelden:

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

Ongeldige voorbeelden:

• voorbeeld.com (protocol ontbreekt)
• www.example.com (ontbrekend protocol)
• gewoon wat tekst

Alleen brieven

Gebruik voor:

• Voor- en achternaam (eenvoudige validatie)
• Stadsnamen
• Landcodes
• Alfabetische identificatoren

Geldige voorbeelden:

• John
• smid
• NewYork

Ongeldige voorbeelden:

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

Let op: Alleen letters zijn toegestaan. Houd er rekening mee of je spaties, koppeltekens of accenten nodig hebt.

Alleen getallen

Gebruik voor:

• ID-nummers
• Rekeningnummers
• Aantal (indien geen numeriek veld wordt gebruikt)
• PIN-codes

Geldige voorbeelden:

• 12345
• 00123
• 9876543210

Ongeldige voorbeelden:

• 123-456 (koppelteken)
• 123.45 (decimaal)
• 12345A

alfanumerieke

Gebruik voor:

• Productcodes
• Referentienummers
• gebruikersnamen
• Serienummers

Geldige voorbeelden:

• ABC123
• User42
• PROD001

Ongeldige voorbeelden:

• ABC-123 (koppelteken)
• ABC 123 (spatie)
• ABC_123 (underscore)

Aangepaste validatiepatronen (Regex)

Wat is Regex?

Reguliere expressies (regex) zijn patronen die tekstformaten beschrijven:

• ^ = Begin van de tekenreeks
• $ = Einde van de tekenreeks
• [A-Z] = Elke hoofdletter
• [a-z] = Elke kleine letter
• [0-9] = Elk willekeurig cijfer
• {3} = Precies 3 van de vorige
• {2,5} = Tussen 2 en 5 van de voorgaande
• + = Een of meer
• * = Nul of meer
• ? = Optioneel (nul of één)

Aangepaste patronen maken

1. Selecteer 'Aangepast' in het validatie-dropdownmenu.
2. Voer uw reguliere expressiepatroon in
3. Test met verschillende invoerwaarden

Veelvoorkomende voorbeelden van aangepaste patronen

Amerikaanse postcode

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

Valideert:

• 12345 (5 cijfers)
• 12345-6789 (ZIP+4)

Afwijzingen:

• 1234 (te kort)
• 123456 (te lang)
• ABCDE (letters)

Amerikaans telefoonnummer

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

Valideert: 555-123-4567

Voor flexibele opmaak: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

Valideert:

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

Productcode (ABC-1234-formaat)

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

Valideert:

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

Afwijzingen:

• abc-1234 (kleine letters)
• AB-1234 (slechts 2 letters)
• ABC1234 (ontbrekend koppelteken)

Kentekenplaat (diverse formaten)

Patroon (VS algemeen): ^[A-Z0-9]{1,7}$

Valideert: 1-7 hoofdletters/cijfers

Creditcard (standaardformaat)

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

Valideert:

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

Let op: Gebruik voor daadwerkelijke betalingen de juiste betalingsverwerkers met hun validatieprocedures.

Gebruikersnaam (letters, cijfers, underscore)

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

Reglement:

• Begint met de letter
• 3-20 tekens in totaal
• Alleen letters, cijfers en een underscore zijn toegestaan.

Valideert: gebruiker_123, JohnDoe, test42

Hex-kleurcode

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

Valideert:

• # FF5733
• #fff
• #ABC123

Datum (JJJJ-MM-DD)

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

Valideert: 2026-01-15

Let op: Voor datums is het meestal beter om een ​​datumveld met een datumkiezer te gebruiken.

Tijd (HH:MM 24-uursformaat)

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

Valideert:

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

Factuurnummer (INV-JJJJ-NNNN)

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

Valideert:

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

Burgerservicenummer (VS)

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

Valideert: 123-45-6789

Waarschuwing: Wees voorzichtig met het verzamelen van burgerservicenummers (BSN's) – dit heeft gevolgen voor de beveiliging en privacy.

Je eigen patronen maken

Stapsgewijs proces

1. Vereisten definiëren: Welk formaat heeft u nodig?
2. Splits het op: Welke personages, hoeveel, en in welke volgorde?
3. Bouwpatroon: Vertaal naar reguliere expressie
4. Grondig testen: Geldige EN ongeldige invoer
5. Schrijf de foutmelding: Help gebruikers de opmaak te begrijpen.

Voorbeeld: Werknemers-ID

Eis: 2 letters + 4 cijfers + 1 letter (bijv. AB1234C)

Afbreken:

• 2 hoofdletters: [A-Z]{2}
• 4 cijfers: \d{4}
• 1 hoofdletter: [A-Z]
• Niets ervoor of erna: ^ en $

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

Testpatronen

Voordat u het formulier gebruikt:

• Test geldige invoer (zou moeten slagen)
• Test ongeldige invoer (zou moeten mislukken)
• Test randgevallen (grenzen, speciale tekens)
• Gebruik online regex-testers om te debuggen.

Foutmeldingen voor validatie

Standaardberichten

• “Voer een geldige waarde in”
• “Dit veld is ongeldig”

Betere gepersonaliseerde berichten

Vertel gebruikers welk formaat ze verwachten:

Gebruik van plaatsaanduiding en helptekst

Voorkom fouten door de opmaak vooraf duidelijk weer te geven:

• Tijdelijke aanduiding: “ABC-1234”
• Helptekst: Voer uw productcode in (bijv. ABC-1234)

Best Practices

1. Begin eenvoudig

Gebruik waar mogelijk ingebouwde patronen. Aangepaste reguliere expressies voegen complexiteit toe.

2. Overvalideer niet te veel.

Te strikte patronen frustreren gebruikers:

• Namen met een koppelteken (Mary-Jane)
• Namen met apostrofen (O'Brien)
• Internationale personages (José, Müller)

3. Toon het verwachte formaat

Vertel gebruikers altijd wat je van ze verwacht:

• Plaatsaanduiding met voorbeeld
• Helptekst met uitleg over de opmaak
• Wis de foutmelding

4. Test randgevallen

• Lege invoer
• Spaties aan het begin/einde
• Speciale karakters
• Maximale lengte

5. Overweeg alternatieven

Soms zijn andere benaderingen beter:

• Datums → Gebruik het datumveld
• Getallen → Gebruik het veld 'Getal'
• Telefoon → Gebruik het veld Telefoon met de volgende opmaak
• Vaste opties → Gebruik vervolgkeuzelijst

Combineren met andere validatiemethoden

Patroon + Vereist

• Het veld moet worden ingevuld EN het patroon moet overeenkomen.
• Leegmaken mislukt als "vereist"
• Onjuist formaat, patroon werkt niet

Patroon + Minimale/Maximale lengte

• Het patroon valideert het formaat.
• Lengte bevestigt de grootte
• Beiden moeten slagen

Problemen oplossen met patronen

Patroon werkt niet

Controleren:

• De zinsbouw is correct (geen typfouten).
• Speciale tekens zijn correct ontsnapt.
• ^ en $ ankers indien nodig

Geldige invoer wordt afgewezen

Controleren:

• Het patroon is wellicht te strikt.
• Ontbrekende geldige tekens in het patroon
• Problemen met hoofdlettergevoeligheid

Ongeldige invoer wordt geaccepteerd

Controleren:

• Het patroon is mogelijk te los.
• Ontbrekende ankers (^ en $)
• Test met meer voorbeelden

Veelgestelde Vragen / FAQ

Kan ik meerdere patronen combineren?

Een enkel veld gebruikt één patroon. Voor complexe validatie kunt u vereisten combineren in één reguliere expressie met behulp van alternatie (|) of een patroon creëren dat aan alle vereisten voldoet.

Zijn patronen hoofdlettergevoelig?

Standaard wel. Gebruik [A-Za-z] om beide hoofdletters en kleine letters te matchen, of voeg een vlag voor hoofdletterongevoeligheid toe indien ondersteund.

Hoe voeg ik spaties toe?

Voeg \s toe aan je tekenklasse: [A-Za-z\s] komt overeen met letters en spaties.

En hoe zit het met internationale personages?

Standaard [A-Za-z] bevat geen geaccentueerde tekens. Voor internationale namen kunt u een minder strikte validatie overwegen of \p{L} (indien ondersteund) gebruiken voor elke letter.

Moet ik valideren bij het verlaten van het veld of verzenden?

Beide functies werken. Bij het verliezen van focus (blur) krijg je sneller feedback. Bij het verzenden van het formulier wordt alles vastgelegd. Veel formulieren doen beide.

Samenvatting

Aangepaste validatiepatronen toevoegen:

1. Kies patroontype – Ingebouwd of op maat gemaakt
2. Configureer patroon – Selecteer of voer een reguliere expressie in
3. Plaatsaanduiding toevoegen – Toon het verwachte formaat
4. Helptekst toevoegen – Leg de vereisten uit
5. Stel een foutmelding in – Richtlijncorrectie
6. Grondig testen – Geldige en ongeldige invoer

Conclusie

Aangepaste validatiepatronen garanderen de datakwaliteit door specifieke formaten af ​​te dwingen. Of u nu URL-validatie, productcodes of aangepaste identificaties nodig hebt, patronen sporen fouten op vóór verzending en begeleiden gebruikers naar de juiste invoer.

Auto Form Builder Het systeem bevat veelvoorkomende patronen (e-mailadressen, URL's, letters, cijfers, alfanumerieke tekens) en ondersteunt aangepaste reguliere expressies voor specifieke validatiebehoeften. Schone data begint met een goede validatie.

Klaar om je formulierinvoer te valideren? Download Auto Form Builder en zorg ervoor dat uw formulieren correct opgemaakte gegevens verzamelen.