如何自动将表单输入序列化为保留原生数据类型的JSON？

实现方案 #

可以通过通用转换逻辑自动识别表单字段类型，无需手动逐个处理字段，有两种常用实现方式：

方式1：基于自定义属性标注类型（灵活性最高）

可以通过HTML的data-*自定义属性给字段标注目标类型，序列化时自动按标注转换，适配所有自定义类型需求。

1. 表单HTML示例：

<form id="my_form_id">
  <input type="text" name="age" data-type="int" value="23">
  <input type="text" name="weight" data-type="float" value="65.5">
  <input type="checkbox" name="is_valid" data-type="boolean" checked>
  <select name="hobbies" data-type="array" multiple>
    <option value="reading" selected>阅读</option>
    <option value="sports" selected>运动</option>
  </select>
  <input type="text" name="username" value="张三">
</form>

2. 改造后的JS代码：

let myform = '#my_form_id';
// 通用类型转换函数，可按需扩展类型分支
function convertValue(value, field) {
  const targetType = field?.dataset?.type;
  switch(targetType) {
    case 'int': 
      return parseInt(value, 10);
    case 'float':
      return parseFloat(value);
    case 'boolean':
      return field.type === 'checkbox' ? field.checked : value === 'true';
    case 'number':
      return Number(value);
    case 'array':
      if (field.type === 'select-multiple') {
        return Array.from(field.selectedOptions).map(opt => opt.value);
      }
      return value.split(',');
    default:
      return value;
  }
}

$(myform).submit(function(event) {
  event.preventDefault();
  const formEl = $(myform)[0];
  const formData = new FormData(formEl);
  // 自动转换所有字段类型
  const typedData = Object.fromEntries(
    Array.from(formData.entries()).map(([key, value]) => {
      const field = formEl.querySelector(`[name="${key}"]`);
      return [key, convertValue(value, field)];
    })
  );
  const json = JSON.stringify(typedData);
  ws.send(json); // 通过websocket发送
});

方式2：基于原生input类型自动识别（无侵入）

如果不想额外加自定义属性，可以直接根据input原生的type属性自动转换类型，不用修改现有表单结构：

let myform = '#my_form_id';
// 基于原生字段类型转换
function convertValueByNativeType(value, field) {
  if (!field) return value;
  switch(field.type) {
    case 'number':
    case 'range':
      return Number(value);
    case 'checkbox':
      return field.checked;
    case 'select-multiple':
      return Array.from(field.selectedOptions).map(opt => opt.value);
    default:
      return value;
  }
}

$(myform).submit(function(event) {
  event.preventDefault();
  const formEl = $(myform)[0];
  const formData = new FormData(formEl);
  const typedData = Object.fromEntries(
    Array.from(formData.entries()).map(([key, value]) => {
      const field = formEl.querySelector(`[name="${key}"]`);
      return [key, convertValueByNativeType(value, field)];
    })
  );
  const json = JSON.stringify(typedData);
  ws.send(json);
});

两种方案都属于通用逻辑，一次开发可以适配所有表单场景，不需要每个字段单独写转换代码，后续有新的类型需求只需要扩展转换函数的分支即可，维护成本很低。

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