Formularvalidierung
Derselbe Teezettel ist wieder da. Das Formular ist #slip, das Textfeld #guest, das Zahlenfeld #cups, und der Knopf #send hat type="submit". #note beginnt als blank.
Einen Wert lesen heißt nicht, ihn anzunehmen. Die Seite ruft weiter preventDefault auf, damit der Browser hier bleibt, und entscheidet dann. Der Name darf nach trim nicht leer sein. Die Tassen müssen eine Zahl von 1 bis 3 sein. Sonst wird abgelehnt. lida und 2 werden angenommen, die Notiz wird ok. Die Seite klickt send, solange der Name leer ist, füllt dann die Felder und klickt noch einmal. Die Zeile lautet need guest / ok.
Nicht der vorige Zettel
Die vorige Seite speicherte lida und die Zeichenkette 2 und schrieb lida / 2 / stayed. Sie fragte nicht, ob die Bestellung erlaubt ist. Ein leerer Gast wäre trotzdem gesendet worden. Diese Seite nutzt dasselbe Formular und denselben Knopf und stellt eine andere Frage: darf diese Bestellung stehen?
Die Prüfung sieht zuerst den Gast. Ist der Name leer, werden die Tassen noch nicht beurteilt. Number("") ist 0 und liegt außerhalb von 1 bis 3, aber ein vergessener Name soll nicht need cups ergeben.
Was die Notiz sagen darf
Die Notiz beginnt als blank. Auf dem Knopf steht weiter send. Jedes Stück startet mit einem leeren Zettel, außer der Seitenzeile.
📊 Was die Notiz sagen darf
| Was getippt wurde | Notiz | Leicht zu verwechseln |
|---|---|---|
| Gast leer, 2 Tassen | need guest | need cups schreiben |
| Gast lida, 9 Tassen | need cups | ok schreiben |
| Gast lida, 2 Tassen | ok | die alte Zeile lida / 2 / stayed |
| Gast lida, 0 Tassen | need cups | 0 als „keine Tassen, also weiter“ lesen |
| Seite, zwei Klicks | need guest / ok | nur das Wort ok |
trim entfernt Leerzeichen an den Enden des Namens. Drei Leerzeichen bleiben nach trim leer. Number macht aus dem Tassentext eine Zahl, damit >= und <= Zahlen vergleichen, nicht Texte. Das Feld speichert weiter Text. Die Umwandlung passiert nur in der Prüfung.
Die Funktion kehrt zurück, sobald eine Regel scheitert. Spätere Zeilen laufen nicht. Deshalb erreicht ein leerer Gast die Tassenprüfung nie.
Drei Wörter, sonst nichts
Die Notiz ist nie der Name und nie die Tassenzahl. Nur need guest, need cups oder ok. Die vorige Seite schrieb lida und 2 in die Notiz. Diese Seite tut das nicht.
Erst der Gast, dann die Tassen
Der Name wird zuerst beurteilt. Ist er leer, schreibt die Funktion need guest und kehrt zurück. Die Tassen dürfen 2 sein und zählen trotzdem nicht.
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = " ";
slip.elements.cups.value = "2";
check();
console.log(note.textContent);
Das Log ist need guest. Die Leerzeichen wurden zu nichts, der Name zählt nicht. Die Tassen waren 2 und wurden nicht geprüft.
Neun Tassen
Frischer Zettel. Der Gast ist lida. Die Tassen sind 9, also über 3.
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = "lida";
slip.elements.cups.value = "9";
check();
console.log(note.textContent);
Das Log ist need cups. Der Name bestand, die Zahl nicht. 1 und 3 bestünden. 0 und 4 nicht.
Eine gültige Bestellung
Wieder ein frischer Zettel. Gast lida, Tassen 2. Beide Regeln bestehen, die Notiz wird ok.
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
check();
console.log(note.textContent);
Das Log ist ok. Über das Bleiben der Seite steht nichts. Die vorige Zeile lida / 2 / stayed gehört zu der Seite, die nur die Felder las.
Die Zeile unter dem Zettel
Das Skript steht am Ende von body. Der Listener ruft preventDefault auf und dann dieselbe Prüfung. Der erste Klick kommt bei leerem Gast, diese Notiz wird gespeichert. Dann füllt das Skript lida und 2 und klickt send erneut. Die Zeile verbindet beide Notizen.
<!DOCTYPE html>
<html>
<head>
<title>tea-slip — page</title>
</head>
<body>
<form id="slip">
<input id="guest" name="guest" type="text">
<input id="cups" name="cups" type="number">
<button id="send" type="submit">send</button>
</form>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let slip = document.getElementById("slip");
let note = document.getElementById("note");
let seen = [];
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.addEventListener("submit", function (event) {
event.preventDefault();
check();
seen.push(note.textContent);
});
document.getElementById("send").click();
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
document.getElementById("send").click();
document.getElementById("line").textContent = seen.join(" / ");
</script>
</body>
</html>
Die Zeile lautet need guest / ok. Der erste Klick fand einen leeren Namen. Der zweite fand lida und 2. Die Notiz endet als ok. Das Wort blank ist weg. lida / 2 / stayed ist die vorige Seite.
An der Theke
- Gast leer lassen, Tassen auf 2 setzen, Prüfung ausführen. Die Notiz ist need guest.
- Gast auf lida und Tassen auf 9 setzen. Die Notiz ist need cups.
- Tassen auf 2 setzen. Die Notiz ist ok.
- Die Zeile der Seite lesen: need guest / ok.
Fehler an der Theke
Auf dem Knopf steht weiter send. Die Notiz ist eines von drei Wörtern: need guest, need cups oder ok.
- ok schreiben, während der Gast noch leer ist
- die Tassen vor dem Namen prüfen, sodass ein leerer Gast need cups wird
trimvergessen, sodass drei Leerzeichen als Name durchgehencups.valueals Text vergleichen und erwarten, dass>=„Zahlen“ versteht- die Zeile als lida / 2 / stayed lesen
- nach dem ersten Klick aufhören und ok verpassen
Das behalten
- Ein leerer Gast, auch nur Leerzeichen, schreibt need guest und stoppt
- Tassen außerhalb von 1 bis 3 schreiben need cups
- lida mit 2 schreibt ok
- Der Gast wird vor den Tassen geprüft
- Die Zeile der Seite lautet need guest / ok
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt