31.1 表单处理：表单验证、动态表单、表单提交

表单是 Web 应用中最常见的用户输入入口，从登录注册到复杂的数据采集，几乎每一个业务流程都离不开它。对于 JavaScript 开发者来说，表单处理的核心工作集中在三个方面：验证输入是否合法、动态控制表单结构、将数据稳妥地提交给服务端。这三件事看似简单，但细节处理不当极易引发 bug 和安全问题。

31.1.1 表单验证

表单验证的目标是确保用户提交的数据符合预设规则，既提升用户体验（即时反馈），又减轻服务端压力和安全风险。验证可以分两个层面来做：

1. HTML5 原生验证 —— 零 JS 成本的第一道防线

现代浏览器为表单控件内置了大量验证属性，开发者不需要写一行 JavaScript 就能获得基础校验能力：

<form id="loginForm">
  <input type="email" required placeholder="邮箱" />
  <input type="password" required minlength="6" maxlength="20" placeholder="密码" />
  <input type="number" min="18" max="100" placeholder="年龄" />
  <input type="text" pattern="[A-Za-z]{3,}" title="至少3个字母" />
  <button type="submit">提交</button>
</form>

required：必填项。
type="email" / type="url" / type="number"：自动校验格式。
minlength / maxlength：字符长度限制。
min / max：数值范围。
pattern：正则表达式校验，配合 title 给出提示。

浏览器会在提交时自动提示不符合规则的字段，无需额外代码。但缺点也很明显：样式不可定制，提示文案固定，无法处理复杂业务逻辑（如两次密码一致、用户名是否已被占用）。

2. JavaScript 自定义验证 —— 灵活覆盖所有场景

当内置规则不够用时，需要用 JavaScript 手动校验，通常配合表单的 submit 事件或输入框的 input / blur 事件来实现：

const form = document.getElementById('loginForm');
form.addEventListener('submit', function(e) {
  // 先阻止默认提交
  e.preventDefault();
  
  const email = form.elements['email'].value;
  const password = form.elements['password'].value;
  const errors = [];

  // 自定义规则
  if (!/^\S+@\S+\.\S+$/.test(email)) {
    errors.push('请输入有效的邮箱地址');
  }
  if (password.length < 6) {
    errors.push('密码长度不能少于6位');
  }

  if (errors.length > 0) {
    // 显示错误信息（此处简单用 alert，实际应更新 UI）
    alert(errors.join('\n'));
    return;
  }

  // 验证通过，提交数据
  submitData({ email, password });
});

实用技巧：

使用 form.elements 可以按 name 或 id 快速获取表单控件，无需大量 document.getElementById。
错误信息应当关联到具体的控件，例如在控件下方显示红色提示，而不要只用 alert。
对于用户名、邮箱的唯一性校验，需要通过异步请求（fetch）到服务端验证，同时可以配合防抖减少请求次数。
可以借助 setCustomValidity() 方法复用原生验证气泡，但定制性仍然有限。

常用验证函数速写：

const validators = {
  required: val => val.trim() !== '',
  email: val => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val),
  phone: val => /^1[3-9]\d{9}$/.test(val),
  minLength: (val, len) => val.length >= len
};

31.1.2 动态表单

很多场景下，表单结构不是一成不变的：例如添加多个收货地址、根据选择的类型展示不同的字段、增删一组输入框。前端需要动态创建、移除表单项，同时保持数据收集和验证的准确性。

1. 列表型动态表单（如添加多个家庭成员）

思路是维护一个数据数组，根据数组渲染对应的输入组。操作时直接修改数组，然后重新渲染或局部更新 DOM：

<div id="memberList">
  <!-- 动态渲染区域 -->
</div>
<button id="addBtn">添加成员</button>

let members = [{ name: '', age: '' }];

function render() {
  const container = document.getElementById('memberList');
  container.innerHTML = members.map((m, i) => `
    <div class="member-item">
      <input name="name-${i}" placeholder="姓名" value="${m.name}" />
      <input name="age-${i}" placeholder="年龄" value="${m.age}" />
      <button type="button" data-index="${i}" class="delBtn">删除</button>
    </div>
  `).join('');

  // 绑定事件
  container.querySelectorAll('.delBtn').forEach(btn => {
    btn.addEventListener('click', function() {
      const idx = parseInt(this.dataset.index);
      members.splice(idx, 1);
      render();
    });
  });
}

document.getElementById('addBtn').addEventListener('click', () => {
  members.push({ name: '', age: '' });
  render();
});

render();

要点：

使用数据驱动视图：数据改变 → 重绘界面。如果项目中使用 React / Vue，这一模式天然成立；原生开发中同样建议遵守。
注意输入框内容变化后要及时将值同步回 members 数组，可以用事件委托监听所有输入。
索引作为 key 可能导致输入框内容错乱，使用唯一的 id 更佳。

2. 条件型动态表单（根据选择显隐字段）

维护一个状态变量，根据该变量的值控制部分表单项的显示：

const typeSelect = document.getElementById('type');
const extraField = document.getElementById('extraField');

typeSelect.addEventListener('change', function() {
  extraField.style.display = this.value === 'other' ? 'block' : 'none';
});

31.1.3 表单提交

验证通过后，需要将数据安全、高效地发送给服务端。提交方式主要分为传统 form 提交和 Ajax 异步提交，现代开发中后者是绝对主流。

1. 使用 FormData 构造请求体

FormData 可以自动收集表单中所有有 name 属性的控件值，尤其适合包含文件上传的场景：

const form = document.getElementById('myForm');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const formData = new FormData(form);
  // 也可以追加额外的字段
  formData.append('timestamp', Date.now());

  try {
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData   // 浏览器自动设置 Content-Type 为 multipart/form-data
    });
    const result = await response.json();
    if (result.success) {
      alert('提交成功');
    }
  } catch (error) {
    console.error('提交失败:', error);
  }
});

优点：

无需手动拼接参数，特别是处理文件流时非常方便。
Content-Type 边界由浏览器自动处理，避免手动设置带来的格式错误。

2. 使用 JSON 格式提交

适用于只有文本/数字等简单数据、没有文件上传的场景：

const data = {
  email: form.elements['email'].value,
  password: form.elements['password'].value
};

await fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});

注意：明确设置 Content-Type: application/json，服务端需要相应地解析 JSON 请求体。

3. 防止重复提交与用户反馈

按钮置灰：在 fetch 开始前禁用提交按钮，结束后恢复。如果使用 async/await，可以在 try...finally 中处理，避免代码异常导致按钮永久禁用。
防止连续点击：利用一个布尔变量 isSubmitting，在提交过程中直接 return。
错误处理：网络异常、服务端返回非 2xx 状态、数据格式错误等都应捕获并给用户明确提示，而不是静默失败。
成功后的状态重置：如果是新增表单，提交成功后可以清空表单或跳转到列表页；编辑表单则可能需要更新本地缓存数据。

小结

表单处理看似简单，却涉及验证、动态渲染、异步通信等多个维度。掌握原生 API（FormData、form.elements、setCustomValidity）能让你在不依赖任何框架的情况下高效完成工作。在 Vue / React 等现代框架中，这些底层原理同样适用——只是将 DOM 操作替换为了数据绑定和组件状态管理。无论形式如何变化，清晰的验证逻辑、可控的动态表单状态、稳健的提交流程，始终是表单处理的三根支柱。