studyklar
IProg · Klausur 3 · Aufgabe 4

Artikelnummer mit regulärem Ausdruck prüfen

Ist „5467BZ68a“ eine gültige Artikelnummer? Ein regulärer Ausdruck (ein Muster für Text) beantwortet das in einer Zeile. Rechts wächst der Rahmen aus der Klausur Lücke für Lücke zur fertigen Funktion. Mit Weiter geht es Schritt für Schritt voran.

Die Aufgabe

4) Reguläre Ausdrücke mit JavaScript (6 Punkte)

Mit Hilfe eines regulären Ausdrucks soll überprüft werden, ob es sich bei einer eingelesenen Benutzereingabe um eine gültige Artikelnummer handelt.

Ergänzen Sie dazu das vorgegebene JavaScript-Unterprogramm so, dass im Fehlerfall eine alert-Meldung ausgegeben wird – im Erfolgsfall soll auf die Folgeseite geleitet werden.

Gültige Artikelnummern sind folgendermaßen aufgebaut: Zuerst 4 Ziffern, dann 2 große Buchstaben, anschließend 2 Ziffern und optional ein kleiner Buchstabe am Ende

Beispiele: 5467BZ67, 5467BZ68a
Gegenbeispiele: 5467BZ67ff, 123BZ67, 5467BZ68B

<script type="text/javascript">  function check_artikelnummer () {     var wert =     var regexp =     if (!regexp.test(wert)) {      }   }</script>  <form name="test"      action="alles_ok.php"      onSubmit="return check_artikelnummer();">   <p><label for="w1">Wert:</label>      <input type="text" id="w1"/></p>   <p><input type="submit" value="speichern"/></p></form>

Im Formular tippt jemand eine Artikelnummer ein und klickt auf „speichern“. Vor dem Absenden soll JavaScript prüfen, ob die Eingabe dem Aufbau entspricht. Passt sie nicht, kommt eine Meldung und das Formular bleibt stehen. Passt sie, geht es weiter zu alles_ok.php.

Gesucht sind drei Lücken in der Funktion: die Eingabe, das Muster, der Fehlerfall.

Merke: Ein regulärer Ausdruck wird Teil für Teil gebaut. Danach wird er mit den Beispielen und den Gegenbeispielen geprüft.
  1. Lesen, wie das Formular die Funktion aufruft.
  2. Den Wert aus dem Eingabefeld holen.
  3. Das Muster aus vier Teilen bauen und an Anfang und Ende festmachen.
  4. Mit den Beispielen und Gegenbeispielen proben.
  5. Fehlerfall und Erfolgsfall schreiben.

Wer die Funktion aufruft

<form name="test"      action="alles_ok.php"      onSubmit="return check_artikelnummer();">

Das Formular hat einen Knopf type="submit". Ein Klick darauf löst das Ereignis „submit“ (Absenden) aus. Vorher läuft, was in onSubmit steht: return check_artikelnummer();.

Liefert die Funktion false, bricht der Browser das Absenden ab. Liefert sie true, schickt er das Formular an alles_ok.php. Das ist die „Folgeseite“ aus der Aufgabe. Unsere Funktion muss also am Ende true oder false zurückgeben.

Aus Skript 03, Folie 4: Variante 2: Absenden blockieren mit onsubmit = f(). Das Formular wird nur abgesandt, wenn f() den Wert true zurückliefert.

Den Wert aus dem Feld holen

    var wert = document.getElementById('w1').value;

Das Eingabefeld hat die ID w1 (Zeile 21). Eine ID ist im Dokument eindeutig. document.getElementById('w1') liefert darum genau dieses Feld. Seine Eigenschaft value ist der eingetippte Text.

Ein name fehlt dem Feld. Den Weg über form.name.value gibt es hier also nicht; die ID ist der einzige Griff.

Aus Skript 02, Folie 8: Zugriff über JavaScript: document.getElementById("IdVal"); eine ID muss innerhalb eines Dokuments eindeutig sein.
Noch 6 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 1

<script type="text/javascript">  function check_artikelnummer () {     var wert =     var regexp =     if (!regexp.test(wert)) {      }   }</script>  <form name="test"      action="alles_ok.php"      onSubmit="return check_artikelnummer();">   <p><label for="w1">Wert:</label>      <input type="text" id="w1"/></p>   <p><input type="submit" value="speichern"/></p></form>
LegendeDer Rahmen aus der Klausur mit seinen drei Lücken in den Zeilen 4, 6 und 9 bis 12.