表单：读取、实时校验与提交

下面是一张真实的小表单。先玩后学：提交钮、回车、实时提示都在工作；控制台会解释每一步。

一、读取控件：value、checked 与 FormData

nameInput.value                 // 文本框、密码框：.value
selectEl.value                  // 下拉框：选中项的 value
checkboxEl.checked              // 复选框/单选框：.checked → true / false
form.querySelectorAll('input[name="interest"]:checked')  // 只挑勾上的

new FormData(form)              // 整表一把抓：可遍历出 [键, 值] 序列

二、input 事件：输入时实时反馈

emailInput.addEventListener('input', () => {
  const ok = /^\S+@\S+\.\S+$/.test(emailInput.value.trim())
  hint.textContent = ok ? '格式看起来没问题' : '需要 名称@域名 的形式'
})

去上面的「邮箱」输入框里敲几个字符试试——提示是跟着输入实时变的（input 事件每次改动都触发）。

三、submit：拦下默认提交，统一校验

form.addEventListener('submit', (e) => {
  e.preventDefault()               // 不拦：页面刷新，JS 状态全部清零
  const errors = {}                // 「字段 → 提示语」的错误对象
  if (!name.value.trim()) errors.name = '名字不能为空'
  if (!/^\S+@\S+\.\S+$/.test(email.value)) errors.email = '邮箱格式不对'
  if (!agree.checked) errors.agree = '需要先同意条款'
  renderErrors(errors)             // Object.entries 逐个写到字段旁边
  if (Object.keys(errors).length) return   // 有错就停
  // 校验通过：组装数据，交给后端（第十九章 fetch）
})

现在去点表单里的「提交注册」（或输入框里按回车）：缺什么字段，错误就直接标在字段旁边。