将html5表单自定义属性传递给JSON

<form id="myForm">
  <input type="text" name="name" data-custom-attr1="value1" data-custom-attr2="value2">
  <input type="email" name="email" data-custom-attr1="value3" data-custom-attr2="value4">
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');
  const inputs = form.querySelectorAll('input');
  
  // 创建一个空的JSON对象
  const jsonData = {};

  // 遍历表单中的每个input元素
  inputs.forEach(input => {
    // 获取input元素的名称和值
    const name = input.name;
    const value = input.value;

    // 获取input元素的自定义属性
    const customAttr1 = input.dataset.customAttr1;
    const customAttr2 = input.dataset.customAttr2;

    // 将名称、值和自定义属性添加到JSON对象中
    jsonData[name] = {
      value,
      customAttr1,
      customAttr2
    };
  });

  // 将JSON对象转换为字符串
  const jsonString = JSON.stringify(jsonData);

  console.log(jsonString);
</script>