14-form

14 Form

JavaScript Development Lab 第 14 个独立最小实验。

本章专门研究 HTML 表单与 JavaScript 之间的数据读取和验证。

核心内容：

• submit
• preventDefault()
• FormData
• get()
• getAll()
• form.elements
• checked
• HTML 原生验证
• JavaScript 自定义验证

---

1. 这一章解决什么问题？

网页经常需要用户录入：

• 产品
• 联系信息
• 搜索条件
• 订单
• 配置

表单负责收集输入，JavaScript 负责读取和处理这些数据。

基本流程：

用户填写表单
↓
submit
↓
JavaScript 读取字段
↓
验证
↓
生成结构化数据

---

2. 为什么使用 submit 而不是只监听按钮 click？

表单的核心事件是：

submit

这样无论用户：

• 点击提交按钮
• 按 Enter

都可以走统一的提交逻辑。

---

3. preventDefault() 做什么？

浏览器默认提交表单通常会重新加载或跳转页面。

本实验使用：

preventDefault()

阻止默认行为，让 JavaScript 接管提交过程。

---

4. FormData 的作用

FormData 可以一次读取表单中的命名字段。

例如：

name="name"
name="category"
name="price"

随后可以通过：

get()

读取单个值。

多个同名 checkbox 则可以通过：

getAll()

得到数组。

---

5. checked 为什么要单独理解？

checkbox 更适合表示：

true / false

因此本章读取库存状态时使用：

checked

最终转换成真正的布尔值。

---

6. 两层验证

本实验故意同时保留两种验证方式。

HTML 原生验证

例如：

required
minlength
min

浏览器会先完成基础检查。

JavaScript 验证

本实验进一步要求：

价格 >= 10

用于理解复杂业务规则不能只依靠 HTML 属性。

---

7. 数据如何流动？

HTML Form
↓
submit event
↓
FormData
↓
读取字段
↓
JavaScript 验证
↓
product Object
↓
页面输出

最终把多个表单字段组织成一个对象：

product{}
├── name
├── category
├── price
├── colors[]
└── inStock

---

8. 推荐修改实验

实验 A

删除某个字段的 required。

观察浏览器验证变化。

实验 B

修改价格验证条件：

10
50
100

实验 C

勾选多个颜色。

观察 getAll() 返回的数组。

实验 D

增加 radio 字段，例如：

surface = smooth / brushed

实验 E

增加 textarea，观察 FormData 是否同样可以读取。

---

9. 本章与 CRUD 的关系

第 13 章重点是：

如何管理数据

第 14 章重点是：

如何从用户输入中可靠获得数据

真实项目常见流程：

Form
↓
Object
↓
CRUD

---

10. 为什么暂时不保存数据？

本章仍然不使用：

• localStorage
• API
• 数据库

因为当前只研究：

表单如何产生可靠的 JavaScript 数据。

下一章才专门解决浏览器本地持久化。

---

文件结构

14-form/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
└── README.md

---

学习目标

完成本章后，应能够理解：

HTML Form 负责收集用户输入，JavaScript 通过 submit、FormData 和字段状态读取数据，并在进入应用逻辑之前完成必要验证。

下一章：

15-localstorage：浏览器本地数据持久化。