studyklar
IProg · Klausur 2 · Aufgabe 3

Datum mit einem regulären Ausdruck prüfen

Ein Formular soll nur abgeschickt werden, wenn im Feld ein Datum wie 1.7.2023 steht. Teil a) füllt die Funktion check() mit einem regulären Ausdruck, Teil b) erlaubt zusätzlich AD oder BC hinter dem Datum. Rechts steht der Rahmencode der Klausur; Schritt für Schritt füllen sich die Lücken. Mit Weiter geht es voran.

Die Aufgabe

3) Reguläre Ausdrücke mit JavaScript (12 Punkte)

Mit Hilfe eines regulären Ausdrucks soll überprüft werden, ob es sich bei einer eingelesenen Benutzereingabe um ein Datum handelt. Ein Datum soll zur Vereinfachung als gültig betrachtet werden, wenn folgende Bedingungen eingehalten sind:

  • die Tage liegen zwischen 1 und 31
  • Monate liegen zwischen 1 und 12
  • das Jahr ist vierstellig
  • Tage und Monate können ein- oder zweistellig eingegeben werden.

Z.B. 01.07.2023, aber auch 1.7.2023

a) Ergänzen Sie check() so, dass im Fehlerfall eine alert-Meldung ausgegeben wird – und im Erfolgsfall auf die Folgeseite weitergeleitet wird. (Der Rahmencode steht rechts.)

b) Um auch historische Daten zu verwalten soll es nun auch noch optional möglich sein, hinter dem Datum einen Text AD oder BC anzugeben. Was muss dazu in dem Programm aus Teil a) geändert werden?

Ein regulärer Ausdruck beschreibt ein Muster für Text: welche Zeichen an welcher Stelle stehen dürfen und wie oft. JavaScript prüft mit exp.test(wert), ob ein Text zum Muster passt; das Ergebnis ist true oder false.

Gültig ist hier ein Tag von 1 bis 31, ein Punkt, ein Monat von 1 bis 12, ein Punkt und ein vierstelliges Jahr. Tag und Monat dürfen eine führende Null haben. Ob es den 31. Februar gibt, prüft das Muster nicht; die Aufgabe sagt „zur Vereinfachung“.

Gesucht sind in a) die Lücken in check(), in b) die Änderung für AD und BC. Die Aufgabe gibt 12 Punkte, davon 3 für b).

Merke: Ein Ausdruck für eine ganze Eingabe beginnt mit ^ und endet mit $. Sonst reicht es, wenn irgendein Teil der Eingabe passt.
  1. Wie Formular und check() zusammenspielen.
  2. Den Wert aus dem Eingabefeld lesen.
  3. Den Ausdruck bauen: Tag, Monat, Jahr.
  4. Fehlerfall und Erfolgsfall.
  5. Mit Beispielen testen.
  6. Teil b): AD oder BC als optionalen Zusatz.

Formular und onSubmit

<form name="test" action="weiter.php" onSubmit="return check()">  <p><label for="xy">Zeit:</label>     <input type="text" id="xy"/></p>  <p><input type="submit" value="pruefen"/></p></form>

Ein Klick auf „pruefen“ will das Formular an weiter.php schicken, die Folgeseite. Vorher läuft onSubmit. Dort steht return check(): Das Ergebnis von check() entscheidet.

Liefert check() true, geht das Formular ab. Liefert sie false, bleibt der Benutzer auf der Seite. Die Weiterleitung im Erfolgsfall macht also das Formular selbst; check() muss nur true zurückgeben.

Aus Skript 03, Folie 4: Mit onsubmit wird das Formular nur abgesandt, wenn die Funktion true zurückliefert.

Den Wert aus dem Feld lesen

    let wert = document.getElementById('xy').value;

Das Eingabefeld hat die id „xy“ (Zeile 15). document.getElementById('xy') holt dieses Element aus der Seite, .value ist der Text, den der Benutzer eingetippt hat.

Noch 9 Schritte bis zum Ergebnis
Den ganzen Lösungsweg sehen Studierende und Lehrende der HS KL. Registriere dich mit deiner Adresse @stud.hs-kl.de oder @hs-kl.de, dann geht es hier direkt weiter.
Registrieren

Abbildung 1a) check() ergänzen

Wert lesen, Ausdruck bauen, Ergebnis melden

<script>  function check() {    let wert =     let exp =     if (!exp.test(wert)) {      }   }</script> <form name="test" action="weiter.php" onSubmit="return check()">  <p><label for="xy">Zeit:</label>     <input type="text" id="xy"/></p>  <p><input type="submit" value="pruefen"/></p></form>
LegendeZeilen des SchrittsDer Rahmencode der Klausur: Die Lücken in check() sind noch leer.