06_react/faq/regulaere-ausdruecke.md

@@ -0,0 +1,48 @@
+# Reguläre Ausdrücke
+
+## Links
+
+- <https://emailregex.com/>
+- <https://regexr.com/>
+- <https://regex101.com/>
+- <https://www.mediaevent.de/javascript/Javascript-Regulaere-Ausdruecke-1.html>
+- <https://www.mediaevent.de/javascript/Javascript-Regulaere-Ausdruecke-2.html>
+
+| Zeichen |  Basiszeichen                                  |
+| ------- | ---------------------------------------------- |
+| `\w`    | Buchstabe, Ziffer oder Unterstrich             |
+| `\W`    | Ein Sonderzeichen                              |
+| `\d`    | Eine Ziffer zwischen 0 bis 9                   |
+| `\D`    | Ein Zeichen, das keine Ziffer ist              |
+| `\s`    | Ein Weißraum (Leerzeichen, Zeilenumbruch usw.) |
+| `\S`    | Jedes Zeichen außer Weißraum                   |
+| `\b`    | Wortgrenze                                     |
+| `\B`    | keine Wortgrenze                               |
+
+| Zeichen | Metazeichen                          |
+| ------- | ------------------------------------ |
+| `.`     | findet alle Zeichen außer Zeilenende |
+| `^`     | Anfang eines Strings                 |
+| `$`     | Ende eines Strings                   |
+| &vert;  | Alternativen                         |
+| `()`    | Teile des Suchmusters abgrenzen      |
+| `[]`    | Zeichenklassen                       |
+| `{}`    | Replikatoren                         |
+
+| Zeichen       | Zeichenklassen                     |
+| ------------- | ---------------------------------- |
+| `[xyz]`       | beliebiger Buchstabe x, y oder z   |
+| `[^xyz]`      | jeder Buchstabe außer x, y oder z  |
+| `[0-9]`       | jede Ziffer zwischen 0 bis 9       |
+| `[a-z]`       | jeder kleine Buchstabe von a bis z |
+| `[A-Za-z0-9]` | alle Buchstaben und Ziffern        |
+| `[a-zß-ü]`    | alle Kleinbuchstaben und Umlaute   |
+
+| Zeichen | Replikatoren                         |
+| ------- | ------------------------------------ |
+| `{n,m}` | mindestens n mal, höchstens m mal    |
+| `{n,}`  | mindestens n mal                     |
+| `{n}`   | genau n mal                          |
+| `*`     | 0 mal oder öfter, äquivalent zu {0,} |
+| `+`     | 1 mal oder öfter, äquivalent zu {1,} |
+| `?`     | 0 oder 1 mal, äquivalent zu {0,1}    |

06_react/unterricht/tag37/02_react-with-forms/src/utils/validators/validate.js

@@ -1,6 +1,10 @@
 const validate = (formData) => {
   const errors = {};
 
+  const emailRegExp = new RegExp(
+    /^(([^<>()\[\]\\.,;:\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,}))$/,
+  );
+
   if (!formData.firstname) {
     errors.firstname = 'Firstname is required';
   }
@@ -11,7 +15,7 @@ const validate = (formData) => {
 
   if (!formData.email) {
     errors.email = 'Email is required';
-  } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+  } else if (!emailRegExp.test(formData.email)) {
     errors.email = 'Email is invalid';
   }