如何优雅地用FormData对象填充HTML表单默认值？

直接利用FormData的entries()方法遍历键值对，匹配表单字段自动填充，无需手动逐个设置。以下是完整实现：

核心思路 #

通过遍历目标FormData的所有键值对，根据字段name属性匹配表单控件，针对不同类型的控件（文本框、单选、复选框等）设置对应的值或状态，最后提交时直接从表单生成新的FormData即可。

代码实现 #

HTML表单示例 #

<form id="targetForm">
  <input type="text" name="username" placeholder="用户名">
  <input type="email" name="email" placeholder="邮箱">
  <input type="tel" name="phone" placeholder="手机号">
  <select name="userRole">
    <option value="viewer">浏览者</option>
    <option value="editor">编辑</option>
    <option value="admin">管理员</option>
  </select>
  <input type="radio" name="gender" value="male"> 男
  <input type="radio" name="gender" value="female"> 女
  <input type="checkbox" name="receiveNews" value="yes"> 接收资讯推送
  <textarea name="selfIntro" placeholder="个人简介"></textarea>
  <button type="submit">提交修改</button>
</form>

JavaScript逻辑 #

// 假设这是你已有的FormData对象
const prefilledFormData = new FormData();
prefilledFormData.append('username', 'charelf');
prefilledFormData.append('email', 'charelf@demo.com');
prefilledFormData.append('userRole', 'editor');
prefilledFormData.append('gender', 'male');
prefilledFormData.append('receiveNews', 'yes');
prefilledFormData.append('selfIntro', '专注前端开发，喜欢高效解决方案');

// 获取表单DOM元素
const form = document.getElementById('targetForm');

// 自动填充表单函数
function fillFormWithFormData(form, formData) {
  for (const [fieldName, fieldValue] of formData.entries()) {
    const control = form.querySelector(`[name="${fieldName}"]`);
    if (!control) continue; // 表单无对应字段则跳过

    // 根据控件类型处理值
    switch (control.type) {
      case 'checkbox':
        control.checked = control.value === fieldValue;
        break;
      case 'radio':
        // 单选框需匹配同组内对应值的控件
        const radioControl = form.querySelector(`[name="${fieldName}"][value="${fieldValue}"]`);
        if (radioControl) radioControl.checked = true;
        break;
      default:
        // 文本、下拉框等直接设置value
        control.value = fieldValue;
        break;
    }
  }
}

// 执行填充
fillFormWithFormData(form, prefilledFormData);

// 提交时获取修改后的FormData
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const updatedFormData = new FormData(form);
  // 此处可发送updatedFormData（示例用console输出）
  console.log('修改后的表单数据：', Object.fromEntries(updatedFormData));
});

说明 #

• 适配所有name属性匹配的表单控件，不管字段数量多少都能自动处理，无需手动逐个配置。
• 针对单选、复选框做了特殊处理，确保状态正确赋值。
• 提交时生成的updatedFormData会包含用户修改后的所有字段值，未修改的字段会保留填充时的默认值。

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