Benutzerdefinierte Validierungsmuster für Textfelder

A Textfeld Akzeptiert beliebige Benutzereingaben – manchmal sind jedoch bestimmte Formate erforderlich. Website-URLs, Produktcodes, Lizenznummern oder Namen, die nur aus Buchstaben bestehen, folgen bestimmten Mustern, um gültig zu sein. Benutzerdefinierte Validierungsmuster ermöglichen es Ihnen, genau festzulegen, welches Format akzeptabel ist, und Fehler vor dem Absenden abzufangen.

In diesem Leitfaden erfahren Sie, wie Sie benutzerdefinierte Validierungsmuster zu Textfeldern in Ihren WordPress-Formularen hinzufügen.

Was sind Validierungsmuster?

Das Konzept

Validierungsmuster sind Regeln, die definieren, welche Eingaben gültig sind:

• „Darf nur Buchstaben enthalten“
• „Muss eine gültige URL sein.“
• „Muss dem Format ABC-1234 entsprechen“
• „Muss genau 10 Zeichen lang sein“

Wie sie arbeiten

1. Der Benutzer gibt etwas in das Textfeld ein.
2. Beim Absenden (oder während der Eingabe) wird die Eingabe anhand eines Musters überprüft.
3. Wenn es übereinstimmt: Validierung erfolgreich
4. Falls nicht: Fehlermeldung wird angezeigt

Vorteile

• Datenqualität: Einheitliche Formate sicherstellen
• Fehlervermeidung: Fehler frühzeitig erkennen
• Benutzerhinweise: Klare Erwartungen
• Downstream-Kompatibilität: Daten arbeiten mit anderen Systemen zusammen

Eingebaute Validierungsmuster

Automatischer Formulargenerator beinhaltet gängige Muster:

Verwendung integrierter Muster

Schritt 1: Textfeld hinzufügen

1. Öffnen Sie Ihr Formular in AFB
2. Ziehen Text Feld zu Formular
3. Zum Konfigurieren klicken

Schritt 2: Validierungsmuster auswählen

1. Finde Validierungsmuster in den Einstellungen
2. Aus dem Dropdown-Menü auswählen:
   • Keines (kein Muster)
   • E-Mail
   • URL
   • Nur Buchstaben
   • Nur Zahlen
   • Alphanumerisch
   • Maßgeschneidert
3. Einstellungen speichern

Schritt 3: Testvalidierung

1. Formularvorschau
2. Versuchen Sie eine gültige Eingabe – sollte erfolgreich sein.
3. Versuchen Sie eine ungültige Eingabe – es sollte eine Fehlermeldung angezeigt werden.

Musterbeispiele und Anwendungsfälle

URL-Validierung

Verwenden für:

• Website-Feld
• Portfolio-Links
• Social-Media-Profile
• Referenz-URLs

Gültige Beispiele:

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

Ungültige Beispiele:

• example.com (fehlendes Protokoll)
• www.example.com (fehlendes Protokoll)
• einfach nur etwas Text

Nur Buchstaben

Verwenden für:

• Vor- und Nachnamen (einfache Validierung)
• Städtenamen
• Ländercodes
• Alphabetische Kennungen

Gültige Beispiele:

• Peter
• Smith
• NewYork

Ungültige Beispiele:

• John123
• New York (Leerzeichen)
• O'Brien (Apostroph)

Hinweis: Die Angabe „nur Buchstaben“ ist zwingend. Überlegen Sie, ob Sie Leerzeichen, Bindestriche oder Akzente benötigen.

Nur Zahlen

Verwenden für:

• ID-Nummern
• Kontonummern
• Menge (wenn kein Zahlenfeld verwendet wird)
• PIN-Codes

Gültige Beispiele:

• 12345
• 00123
• 9876543210

Ungültige Beispiele:

• 123-456 (Bindestrich)
• 123.45 (dezimal)
• 12345A

Alphanumerisch

Verwenden für:

• Produktcodes
• Referenznummer
• Benutzernamen
• Seriennummern

Gültige Beispiele:

• ABC123
• User42
• PROD001

Ungültige Beispiele:

• ABC-123 (Bindestrich)
• ABC 123 (Leerzeichen)
• ABC_123 (Unterstrich)

Benutzerdefinierte Validierungsmuster (Reguläre Ausdrücke)

Was ist Regex?

Reguläre Ausdrücke (Regex) sind Muster, die Textformate beschreiben:

• ^ = Anfang der Zeichenkette
• $ = Ende der Zeichenkette
• [A-Z] = Beliebiger Großbuchstabe
• [a-z] = Beliebiger Kleinbuchstabe
• [0-9] = Beliebige Ziffer
• {3} = Genau 3 der vorherigen
• {2,5} = Zwischen 2 und 5 der vorherigen
• + = Ein oder mehrere
• * = Null oder mehr
• ? = Optional (null oder eins)

Erstellen benutzerdefinierter Muster

1. Wählen Sie im Validierungs-Dropdown-Menü „Benutzerdefiniert“ aus.
2. Geben Sie Ihr Regex-Muster ein.
3. Test mit verschiedenen Eingaben

Häufige Beispiele für benutzerdefinierte Muster

US-Postleitzahl

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

Bestätigt:

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

Ausschuss:

• 1234 (zu kurz)
• 123456 (zu lang)
• ABCDE (Buchstaben)

US-Telefonnummer

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

Bestätigt: 555-123-4567

Für flexibles Format: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

Bestätigt:

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

Produktcode (Format ABC-1234)

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

Bestätigt:

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

Ausschuss:

• abc-1234 (Kleinbuchstaben)
• AB-1234 (nur 2 Buchstaben)
• ABC1234 (fehlender Bindestrich)

Kennzeichen (verschiedene Formate)

Muster (US allgemein): ^[A-Z0-9]{1,7}$

Bestätigt: 1-7 Großbuchstaben/Zahlen

Kreditkarte (Standardformat)

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

Bestätigt:

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

Hinweis: Für tatsächliche Zahlungen verwenden Sie bitte geeignete Zahlungsdienstleister mit deren Validierungsfunktion.

Benutzername (Buchstaben, Zahlen, Unterstrich)

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

Regeln:

• Beginnt mit dem Buchstaben
• Insgesamt 3-20 Zeichen
• Nur Buchstaben, Zahlen, Unterstrich

Bestätigt: Benutzer_123, JohnDoe, Test42

Hex-Farbcode

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

Bestätigt:

• #FF5733
• #fff
• #ABC123

Datum (JJJJ-MM-TT)

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

Bestätigt: 2026-01-15

Hinweis: Für Datumsangaben ist die Verwendung eines Datumsfelds mit Datumsauswahl in der Regel besser.

Zeit (HH:MM 24-Stunden-Format)

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

Bestätigt:

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

Rechnungsnummer (INV-YYYY-NNNN)

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

Bestätigt:

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

Sozialversicherungsnummer (USA)

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

Bestätigt: 123-45-6789

Warnung: Vorsicht bei der Erfassung von Sozialversicherungsnummern – Sicherheits- und Datenschutzrisiken.

Eigene Muster erstellen

Schritt für Schritt

1. Anforderungen definieren: Welches Format benötigen Sie?
2. Brechen Sie es auf: Welche Figuren, wie viele, in welcher Reihenfolge?
3. Aufbaumuster: In regulären Ausdruck übersetzen
4. Gründlich testen: Gültige UND ungültige Eingaben
5. Fehlermeldung schreiben: Helfen Sie den Benutzern, das Format zu verstehen.

Beispiel: Mitarbeiter-ID

Voraussetzung: 2 Buchstaben + 4 Ziffern + 1 Buchstabe (z. B. AB1234C)

Nervenzusammenbruch:

• 2 Großbuchstaben: [A-Z]{2}
• 4 Ziffern: \d{4}
• 1 Großbuchstabe: [A-Z]
• Nichts davor oder danach: ^ und $

Endgültiges Muster: ^[A-Z]{2}\d{4}[A-Z]$

Testmuster

Vor der Verwendung in folgendem Formular:

• Test auf gültige Eingaben (sollte erfolgreich sein)
• Test auf ungültige Eingaben (sollte fehlschlagen)
• Testen von Grenzfällen (Grenzen, Sonderzeichen)
• Verwenden Sie Online-Regex-Tester zum Debuggen.

Fehlermeldungen für die Validierung

Standardmeldungen

• "Bitte geben Sie einen gültigen Wert ein"
• „Dieses Feld ist ungültig.“

Bessere benutzerdefinierte Nachrichten

Teilen Sie den Nutzern das erwartete Format mit:

Platzhalter und Hilfetext verwenden

Fehler vermeiden, indem das Format im Voraus angezeigt wird:

• Platzhalter: „ABC-1234“
• Hilfetext: „Geben Sie Ihren Produktcode ein (z. B. ABC-1234)“

Praxisbeispiele

1. Beginnen Sie einfach

Verwenden Sie nach Möglichkeit integrierte Muster. Benutzerdefinierte reguläre Ausdrücke erhöhen die Komplexität.

2. Nicht übermäßig validieren

Übermäßig strenge Vorgaben frustrieren die Nutzer:

• Namen mit Bindestrichen (Mary-Jane)
• Namen mit Apostrophen (O'Brien)
• Internationale Charaktere (José, Müller)

3. Erwartetes Format anzeigen

Teilen Sie den Nutzern immer mit, was Sie erwarten:

• Platzhalter mit Beispiel
• Hilfetext zur Erläuterung des Formats
• Fehlermeldung löschen

4. Testen von Grenzfällen

• Leere Eingabe
• Leerzeichen am Anfang/Ende
• Spezielle Charaktere
• Maximale Länge

5. Überlegen Sie sich Alternativen

Manchmal sind andere Herangehensweisen besser:

• Datum → Datumsfeld verwenden
• Zahlen → Zahlenfeld verwenden
• Telefon → Verwenden Sie das Feld „Telefon“ mit folgendem Format:
• Feste Optionen → Dropdown-Menü verwenden

Kombination mit anderen Validierungsmethoden

Muster + Erforderlich

• Das Feld muss ausgefüllt sein UND dem Muster entsprechen.
• Leere Felder schlagen als „erforderlich“ fehl.
• Falsches Format führt zu Fehlern im Muster

Muster + Mindest-/Maximallänge

• Muster validiert Format
• Die Länge bestätigt die Größe
• Beide müssen bestehen

Fehlerbehebungsmuster

Muster funktioniert nicht

Prüfen:

• Die Syntax ist korrekt (keine Tippfehler).
• Sonderzeichen wurden korrekt maskiert
• ^ und $ Anker, falls erforderlich

Gültige Eingaben werden abgelehnt

Prüfen:

• Das Muster ist möglicherweise zu streng
• Fehlende gültige Zeichen im Muster
• Probleme mit der Groß-/Kleinschreibung

Ungültige Eingaben werden akzeptiert

Prüfen:

• Das Muster ist möglicherweise zu locker
• Fehlende Anker (^ und $)
• Testen Sie mit weiteren Beispielen

Häufig gestellte Fragen

Kann ich mehrere Muster kombinieren?

Für ein einzelnes Feld wird ein Muster verwendet. Bei komplexen Validierungen kombinieren Sie die Anforderungen in einem regulären Ausdruck mithilfe der Alternation (|) oder erstellen Sie ein Muster, das alle Anforderungen erfüllt.

Sind Muster zwischen Groß- und Kleinschreibung unterscheiden?

Standardmäßig ja. Verwenden Sie [A-Za-z], um beide Groß- und Kleinschreibung zu berücksichtigen, oder fügen Sie, falls unterstützt, ein Flag zur Nichtbeachtung der Groß-/Kleinschreibung hinzu.

Wie kann ich Leerzeichen einfügen?

Fügen Sie \s zu Ihrer Zeichenklasse hinzu: [A-Za-z\s] entspricht Buchstaben und Leerzeichen.

Und wie sieht es mit internationalen Charakteren aus?

Der Standardzeichensatz [A-Za-z] enthält keine Akzentzeichen. Bei internationalen Namen empfiehlt sich eine weniger strenge Validierung oder die Verwendung von \p{L} (sofern unterstützt) für beliebige Buchstaben.

Soll ich bei Unschärfe validieren oder absenden?

Beide Varianten funktionieren. Die Funktion „Verschwinden“ (Fokusverlust) liefert schnelleres Feedback. Die Funktion „Absenden“ erfasst alle Daten. Viele Formulare nutzen beides.

Zusammenfassung

Hinzufügen benutzerdefinierter Validierungsmuster:

1. Musterart auswählen – Eingebaut oder kundenspezifisch
2. Muster konfigurieren – Regulären Ausdruck auswählen oder eingeben
3. Platzhalter hinzufügen – Erwartetes Format anzeigen
4. Hilfetext hinzufügen – Anforderungen erläutern
5. Fehlermeldung festlegen – Korrektur der Führungslinie
6. Testen Sie gründlich – Gültige und ungültige Eingaben

Fazit

Benutzerdefinierte Validierungsmuster gewährleisten Datenqualität durch die Durchsetzung spezifischer Formate. Ob URL-Validierung, Produktcodes oder benutzerdefinierte Kennungen – die Muster erkennen Fehler vor der Übermittlung und leiten die Benutzer zur korrekten Eingabe.

Automatischer Formulargenerator Enthält gängige Muster (E-Mail, URL, Buchstaben, Zahlen, alphanumerische Zeichen) und unterstützt benutzerdefinierte reguläre Ausdrücke für spezielle Validierungsanforderungen. Saubere Daten beginnen mit einer korrekten Validierung.

Sind Sie bereit, Ihre Formulareingaben zu validieren? Laden Sie den automatischen Formulargenerator herunter. und stellen Sie sicher, dass Ihre Formulare korrekt formatierte Daten erfassen.