Feder wie E-Mail, IP-Adresse, Mac-Adresse usw. folgen einem festen Schema, dass nur zu gerne von Benutzern bei der Eingabe missachtet wird. Sei es im Eifer des Gefechts oder aus Unwissenheit, Menschen machen Fehler.
Gut, dass es Regex gibt. Eine Abfragesprache, die nur dazu entwickelt wurde, in Daten gewisse Muster zu finden. Genau diese können wir uns in der UUX zu Nutze machen, um Feldeingaben in Dialogen auf Richtigkeit zu prüfen.
Als Beispiel werden wir hier die E-Mail-Adresse im Personen-Dialog auf Richtigkeit prüfen. Also los gehts!
Dialog öffnen
Wechsle zuerst mal in die Administration der UUX und öffne den Layout-Designer für den entsprechenden Dialog.
Feld-Eigenschaften öffnen
Suche nun das Feld, welches du prüfen willst und öffne die Eigenschaften.
Hier siehst du bereits die Eigenschaft “Muster” in der wir das Regex einfügen werden. Diese Eigenschaft ist logischerweise nur bei Text-Feldern verfügbar 😉
Regex erstellen
Bevor es nun weitergeht, mach dir einen 2ten Tab auf und öffne Regex101.com. Das ist mein persönlicher Go-To Place für Regex-Rumgeteste.
Zuerst müssen wir hier die Sprache einstellen und die Flags entfernen.
Die Standard-Flags (gm) schaden natürlich nicht, für die Validierung von einzeiligen Feldern braucht man aber weder global (g) noch multiline (m)
Ein paar Worte zu Regex
Ich kann dir hier natürlich nicht auf die Schnelle Regex erklären, aber Regex101 ist ein guter Anfang. Falls du eigene, andere Felder validieren möchtest, gibt es normalerweise nach 1-2 Minuten im Internet suchen viele Beispiele, die du nutzen kannst. Verständnis ist also nicht zwingend erforderlich, kann aber auch nicht schaden.
Bei Regex101 gibt es auch eine sogenannte Library, in der man sehr viele Beispiele findet.
Auf alle Fälle musst du darauf achten, bei Regex101 wie oben zu sehen die Syntax auf ECMAScript umzustellen, da die UUX diese Syntax benutzt (mindestens führender / und schließender /).
Um eine E-Mail-Adresse zu überprüfen, gibt es viele Regex-Beispiele. Wir verwenden ein von hier “geliehenes” Regex, welches zu 99 % der RFC entspricht:
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/Code-Sprache: HTML, XML (xml)Regex einbauen
Nun nimm dir einfach dein erstelltes Regex und füge es in das Attribut “Muster” der Feldeigenschaften hinein:
Veröffentlichen nicht vergessen 😉
Testen
Jetzt noch den Dialog im Frontend öffnen und schauen, ob alles so funktioniert wie erwartet. In unserem Fall geben wir also im Personen-Dialog der UUX E-Mail-Adressen ein.
Ungültiger Wert
Gültiger Wert
Weitere Regex-Beispiele
Hier noch eine kleine Regex-Sammlung aus der Praxis, damit du nicht von null starten musst. Diese Sammlung hat übrigens keinen Anspruch auf Richtigkeit oder Vollständigkeit 😉
Kennzeichen (Link)
/^[A-ZÖÜÄ]{1,3} [A-ZÖÜÄ]{1,2} [1-9]{1}[0-9]{1,3}$/Code-Sprache: ReasonML (reasonml)DE IBAN
/^DE\d{2}[ ]\d{4}[ ]\d{4}[ ]\d{4}[ ]\d{4}[ ]\d{2}|DE\d{20}$/Kennwort, 8-14 Zeichen & bestimmten Sonderzeichen (Link)
/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[#$%^&*()\-_+={}[\]|\:;"'<>,.?\/]).{8,14}$/Code-Sprache: HTML, XML (xml)MAC-Adresse (Link)
/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/IPv4-Adresse (Link)
/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/Fertig
Man sieht, Regex eröffnet viele Möglichkeiten. Um nur ein weiteres Beispiel zu nennen, könnte man ein Regex auf Telefonnummer-Felder legen, um sicherzustellen, dass diese immer in derselben Form eingegeben wird (z.B. +49 33344 4385785).
