JavaScript 基础与页面交互
事件与表单提交
监听一次 submit，读取表单数据、验证后加入记录并重新渲染。
- 难度
- 入门
- 预计时间
- 40 分钟
- 最近验证
- 2026/9/21
这一节要完成什么
监听一次 submit，读取表单数据、验证后加入记录并重新渲染。
先理解：为什么要学它
监听一次 submit，读取表单数据、验证后加入记录并重新渲染。
跟着做
form.addEventListener('submit', (event) => {
event.preventDefault();
const data = new FormData(form);
const topic = String(data.get('topic') ?? '').trim();
const minutes = Number(data.get('minutes'));
if (!topic || !Number.isFinite(minutes) || minutes <= 0) return;
sessions.push({ id: Date.now(), topic, minutes, done: false });
renderSessions(sessions);
form.reset();
});- 打开上一节保留的项目，先运行当前版本并记录结果。
- 输入示例并逐行运行，完成：连续提交正常、空主题、0 分钟和非数字输入，只有有效记录能进入列表。
- 至少改变一个输入，先预测结果，再用浏览器验证。
- 故意制造本节典型错误，再根据错误信息修复：同一个表单不要重复注册监听器；刷新后一次提交只能增加一条。
关键代码怎么读
- 监听一次 submit，读取表单数据、验证后加入记录并重新渲染。
- 代码要按输入、处理、输出三部分阅读；先指出每一部分在哪里。
- 能运行只是第一步，完成后必须用不同输入验证边界。
常见错误：看到什么，检查什么
| 现象 | 检查方法 |
|---|---|
| 结果与预期不同 | 同一个表单不要重复注册监听器；刷新后一次提交只能增加一条。 |
| 刷新后没有变化 | 确认文件已保存、脚本路径正确，并阅读 Console 第一条相关错误。 |
自己完成一次
连续提交正常、空主题、0 分钟和非数字输入，只有有效记录能进入列表。
完成后再看参考答案
完成后应能不用复制示例重新实现，并解释为什么这样处理。关键检查：同一个表单不要重复注册监听器；刷新后一次提交只能增加一条。
完成检查
- 我完成了本节要求的可见结果
- 我能解释关键代码的输入、处理和输出
- 我测试了正常、边界和错误情况