jQuery实现可增删动态表单，获取输入值存入指定结构数组

第一步：统一表单项结构规范 #

给每组表单项外层加统一类名form-group-item，组内每个输入控件添加data-field属性，属性值对应你要输出的字段名，结构示例如下：

<!-- 单组表单项参考结构 -->
<div class="form-group-item">
  <input type="text" data-field="name" placeholder="姓名">
  <input type="text" data-field="mobile" placeholder="手机号">
  <input type="email" data-field="email" placeholder="邮箱">
  <input type="date" data-field="birthday" placeholder="出生日期">
  <select data-field="user_type">
    <option value="1">普通用户</option>
    <option value="2">VIP用户</option>
  </select>
  <button class="del-group">删除当前组</button>
</div>
<button id="add-group">新增表单项</button>
<button id="submit">提交表单</button>

第二步：编写数据收集逻辑 #

基于jQuery遍历所有表单组，按组拼接成目标结构数组，代码如下：

// 封装表单数据收集方法，调用即可返回目标数组
function getFormGroupList() {
  const dataList = [];
  // 遍历所有有效表单组
  $('.form-group-item').each(function () {
    const groupItem = {};
    // 遍历当前组内所有绑定了字段的输入控件
    $(this).find('[data-field]').each(function () {
      const fieldKey = $(this).data('field');
      const fieldValue = $(this).val().trim();
      // 若需要过滤空值可加判断：if (fieldValue) groupItem[fieldKey] = fieldValue
      groupItem[fieldKey] = fieldValue;
    });
    dataList.push(groupItem);
  });
  // 可在此处加最多15组的校验逻辑：if (dataList.length > 15) { alert('最多可添加15组数据'); return [] }
  return dataList;
}

// 调用示例：点击提交按钮时获取数据
$('#submit').on('click', function () {
  const formResult = getFormGroupList();
  console.log(formResult); // 输出的就是你要求的结构数组
  // 后续提交到后端的逻辑写在这里
})

注意事项 #

• 如果组内包含单选框、复选框这类特殊控件，需要单独判断控件类型调整取值逻辑，比如复选框需要获取选中状态或者选中值的数组
• 新增/删除表单组的逻辑不需要修改，只要新增的组保持form-group-item类名和内部data-field属性规则，数据收集方法自动适配
• 要加字段非空、格式校验的话，可以在遍历控件取值的环节加判断，不符合要求直接中断遍历抛出提示即可

内容的提问来源于stack exchange，提问作者rameez khan