如何获取HTML表单中所有非空控件的数据-html教程-PHP中文网

formdata无法直接“只取非空”是因为其设计原则是忠实收集所有成功控件，无论值是否为空字符串、"on"或null；需手动遍历entries()并过滤无效值。

如何获取html表单中所有非空控件的数据

直接用 FormData 拿全数据，再手动过滤空值——它本身不区分空/非空，必须自己筛。

为什么 FormData 不能直接“只取非空”

FormData 的设计原则是忠实地收集所有“成功控件”：只要控件有 name、未被 disabled、且不是 type="reset" 或无 value 的 image，就照单全收，不管值是不是空字符串、"on" 还是 null。所以 formData.get("email") 可能返回 ""，formData.getAll("hobby") 可能返回 ["", "reading"]。

文本类（text、email、textarea）即使用户没输，也会提交空字符串
复选框（checkbox）未勾选时根本不会出现在 FormData 中；但若显式设了 value="" 并勾选，就会存入 ""
下拉框（select）若首项是空选项（<option value=""></option>）且被选中，也会传 ""

用 for...of 遍历 + 条件过滤最可控

别依赖 Object.fromEntries(formData)，它会把同名多值覆盖掉，而且没法在转对象前做空值判断。正确做法是遍历 entries()，逐个检查值是否“有效”：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

form.addEventListener('submit', e => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const nonEmptyData = {};

  for (const [key, value] of formData.entries()) {
    // 空字符串、null、undefined 视为无效
    if (value && value !== '' && value !== 'on') {
      // 同名字段（如多个 checkbox）需聚合为数组
      if (nonEmptyData[key] === undefined) {
        nonEmptyData[key] = value;
      } else if (Array.isArray(nonEmptyData[key])) {
        nonEmptyData[key].push(value);
      } else {
        nonEmptyData[key] = [nonEmptyData[key], value];
      }
    }
  }

  console.log(nonEmptyData);
});

value !== 'on' 是为了排除未设 value 的 checkbox 默认值
遇到同名字段时，手动判断类型并转成数组，避免丢值
这个逻辑放在 submit 事件里，确保读的是最终提交那一刻的 DOM 状态

动态表单或跨 form 字段怎么办

当字段不在同一个 <form></form> 标签内（比如分步表单、弹窗输入），FormData(formEl) 失效。此时改用 querySelectorAll 手动捞控件，再逐个判断：

const controls = document.querySelectorAll('input:not([disabled]):not([type="reset"]):not([type="button"]), select:not([disabled]), textarea:not([disabled])');
const nonEmptyData = {};

controls.forEach(el => {
  const name = el.name;
  if (!name) return;

  let value;
  if (el.type === 'checkbox' || el.type === 'radio') {
    value = el.checked ? el.value : null;
  } else if (el.tagName === 'SELECT' && el.multiple) {
    value = Array.from(el.selectedOptions).map(opt => opt.value).filter(v => v);
  } else {
    value = el.value.trim();
  }

  if (value != null && value !== '' && value.length > 0) {
    if (nonEmptyData[name] === undefined) {
      nonEmptyData[name] = value;
    } else if (Array.isArray(nonEmptyData[name])) {
      nonEmptyData[name].push(value);
    } else {
      nonEmptyData[name] = [nonEmptyData[name], value];
    }
  }
});