表单校验
同一张茶单又回来了。表单是 #slip，文本框 #guest，数字框 #cups，按钮 #send 的 type="submit"。#note 一开始是 blank。
读到值不等于收下它。页面仍然调用 preventDefault，浏览器留在这里，然后再决定。名字用 trim 去掉两端空白后不能是空的。杯数必须是 1 到 3 的数。其余都拒绝。lida 和 2 会通过，备注变成 ok。页面在名字还空着时点一次 send，再填好字段点第二次。这一行是 need guest / ok。
不是上一张茶单
上一页存了 lida 和字符串 2，写下 lida / 2 / stayed。它不问这份订单能不能成立。空的客人也会被送出去。这一页用同一张表单、同一个按钮，问的是另一件事：这份订单站得住吗？
检查先看客人。名字是空的，杯数先不判。Number("") 是 0，落在 1 到 3 之外，但人忘了写名字时，不该写成 need cups。
备注可以写什么
备注从 blank 开始。按钮上仍是 send。除了页面那一行，每一段都从空茶单开始。
📊 备注可以写什么
| 输入了什么 | 备注 | 容易混 |
|---|---|---|
| 客人空着，2 杯 | need guest | 写成 need cups |
| 客人 lida，9 杯 | need cups | 写成 ok |
| 客人 lida，2 杯 | ok | 上一页的 lida / 2 / stayed |
| 客人 lida，0 杯 | need cups | 把 0 当成「没有杯数，跳过」 |
| 页面，点两次 | need guest / ok | 单独一个 ok |
trim 去掉名字两端的空格。三个空格在 trim 之后仍是空的。Number 把杯数文本变成数字，>= 和 <= 比的是数字，不是字符串。输入框里仍是文本。转换只发生在检查里面。
一条规则失败，函数立刻返回。后面的行不会执行。所以空的客人到不了杯数检查。
只有三个词
备注从来不是客人的名字，也不是杯数。只有 need guest、need cups 或 ok。上一页把 lida 和 2 写进备注。这一页不这么做。
先客人，后杯数
名字先判。空的话，函数写下 need guest 并返回。杯数可以是 2，也仍然不算。
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);
日志是 need guest。空格变成了空，名字不算。杯数是 2，根本没被检查。
九杯
新茶单。客人是 lida。杯数是 9，超过 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);
日志是 need cups。名字过了，数量没过。1 和 3 会过。0 和 4 不会。
合格的订单
再来一张新茶单。客人 lida，杯数 2。两条规则都过，备注变成 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);
日志是 ok。没有写页面留不留在原地。上一行 lida / 2 / stayed 属于只读字段的那一页。
茶单下面的那一行
脚本在 body 末尾。监听器先调用 preventDefault，再做同一次检查。第一次点击时客人是空的，那条备注被存下来。然后脚本填上 lida 和 2，再点一次 send。这一行把两条备注接在一起。
<!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>
这一行是 need guest / ok。第一次点到空名字。第二次点到 lida 和 2。备注停在 ok。blank 没了。lida / 2 / stayed 是上一页。
在柜台
- 客人留空，杯数设为 2，运行检查。备注是 need guest。
- 客人设为 lida，杯数设为 9。备注是 need cups。
- 杯数设为 2。备注是 ok。
- 读页面那一行：need guest / ok。
柜台上看错的地方
按钮上仍是 send。备注是三个词之一：need guest、need cups 或 ok。
- 客人还空着就写 ok
- 先判杯数，空客人变成 need cups
- 忘了
trim，三个空格当成名字通过 - 把
cups.value当文本比，还指望>=懂「数字」 - 把这一行读成 lida / 2 / stayed
- 第一次点击后就停，漏掉 ok
记住这些
- 空客人，哪怕只有空格，也会写下 need guest 并停下
- 杯数不在 1 到 3，写下 need cups
- lida 配 2，写下 ok
- 客人先于杯数被检查
- 页面这一行是 need guest / ok
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部