表单重复组必须用包裹并采用数组式命名（如contacts0），配合javascript动态增删时需重置name属性和清空value，提交前手动校验每块必填项，后端需适配嵌套字段解析。
表单结构必须用 <fieldset></fieldset> 包裹重复组
多个联系人不能靠复制一堆独立的 <input> 解决，否则提交时字段名冲突、后端无法区分。正确做法是把每个联系人块封装进 <fieldset></fieldset>，并用数组式命名（如 contacts[0][name]）。浏览器原生支持这种结构，且方便 JavaScript 动态增删。
常见错误：直接写 <input name="name"><input name="phone"> 多次——后端只能收到最后一个值。
- 每个联系人块外层用
<fieldset></fieldset>，加data-contact-index属性便于 JS 定位 - 内部
name属性写成contacts[0][name]、contacts[0][email]格式（数字索引随添加动态递增） - 保留一个隐藏的模板块（
display: none），避免每次 clone 时 DOM 操作出错
addContact() 函数要重置新块的 name 和 value
单纯 clone 模板会导致所有输入框 name 相同、value 残留旧数据，提交时要么覆盖、要么校验失败。JS 添加新联系人时，必须遍历新块内所有 <input>、<select></select>，重写 name 并清空 value 或设为默认值。
容易踩的坑：只改 name 不清 value，用户点“添加”后看到上一个人的信息还留在新行里。
- 用
querySelectorAll('input, select, textarea')获取所有表单项 - 对每个元素执行
el.name = el.name.replace(/\[\d+\]/, `[${nextIndex}]`) - 显式设置
el.value = ''（type="checkbox"或type="radio"需单独处理checked = false）
提交前需验证每个联系人块的必填项，不能只校验第一个
HTML5 的 required 属性在动态添加的元素上默认生效，但若用户删掉部分联系人再提交，可能漏掉中间某块的校验。更可靠的方式是在 submit 事件里手动遍历所有 fieldset[data-contact-index]，逐个检查关键字段是否为空。
典型现象：表单看似提交成功，后端却收到空 contacts[1][name]，因为第二块没填但浏览器没弹提示。
- 用
document.querySelectorAll('fieldset[data-contact-index]')获取全部联系人块 - 对每块执行
block.querySelector('[name$="[name]"]').value.trim() === ''类似判断 - 发现任一必填项为空，调用
event.preventDefault()，并聚焦到第一个空字段
后端接收时注意 contacts 是数组，不是扁平字段
前端用 contacts[0][name] 这种嵌套 name，PHP 会自动解析成二维数组 $_POST['contacts'][0]['name']，但 Node.js（如 Express）默认只解析一层，需要配置 extended: true 的 urlencoded 中间件，否则收到的是字符串 "[object Object]"。
容易被忽略的点：本地测试时用 Postman 提交没问题，部署到 Nginx + PHP 环境一切正常，但换到 Express 就丢数据——其实是 bodyParser 配置漏了。
- Express 用户确认
app.use(express.urlencoded({ extended: true })) - Python Flask 用户需用
request.form.getlist('contacts[0][name]')配合循环解析，或改用 JSON 提交 - 不要依赖浏览器自动序列化；提交时明确用
FormData构造，并检查console.log([...formData])输出是否符合预期
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
