2024了，你会使用原生js批量获取表单数据吗-阿里云开发者社区

2024了，你会使用原生js批量获取表单数据吗

2024-10-17 58

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 2024了，你会使用原生js批量获取表单数据吗

I)1TY)]R%2GSY@X7{K2@I@V.png

背景

昨天表弟问了我一个问题

WW10Z{EKZA3HBBRD7J{2GIV.png

我立马会回了一段代码过去。岂能说不会！

CRO1]MPZETS4(AJ1LOZJO1T.png

分析

其实要快速获取表单数据的功能并不复杂。~~就两步~~

~~分析需求~~
~~编写代码~~

要清楚常见的表单有哪些
根据表单获取到的数据结构是什么样子

常见的表单标签

email、date等存在兼容性的表单标签可以忽略。

文本框 input[type=text]

<input type="text">

$P@APEARKFCE{_}A7_8CXFNW.png$

密码框 input[type=password]

<input type="password">

$2X6L29]@1Y9@[U159NM(8W.png

文本域 textarea

<textarea></textarea>

(F]252PLPTOAGH@OHJ`0EYB.png

下拉列表 select

<select></select>

HLJP_]NTG}SL0H~3RGJ5QQI.png

单选框 input[type=radio]

<input type="radio">

5X]`(0FZMUN6G0ADRXXT]~B.png

复选框 input[type=checkbox]

<input type="checkbox">

CA`T@SK3D9VK{TD@M9MWGVK.png

文件选择框 input[type=file]

<input type="file">

`R6J00JSGD)]40V4XS6LS%S.png

获取表单值的方式

不同的标签，有不同的获取它们值的方式

文本框和密码框和文本域

他们都是通过 value属性直接获取值

dom.value

下拉列表

下拉列表其实也可以多选的 multiple

<select name="city" multiple>
    <option value="广州">广州</option>
    <option value="东莞">东莞</option>
    <option value="佛山">佛山</option>
  </select>

3EU7BF8QFS`{BBK(TP7$0I9.png

当下拉列表没有添加多选时，直接通过value属性即可获取到对应值。dom.value
当下拉列表添加多选时，获取获取子元素 option，通过判断是否 selected 来获取选中的值。

const select = document.querySelector("select")
  for (let index = 0; index < select.children.length; index++) {
    const option = select.children[index];
    if (option.select) {
      console.log(option.value);
    }
  }

单选框

单选框的特点是同一组单选框都会有同一个name属性。并且选中的单选框的checked属性为true

<input type="radio" name="gender" value="男" checked> 男
  <input type="radio" name="gender" value="女"> 女

因此便可以通过这个特点来获取选中的单选框。获取的方式有两种

document.querySelector("[name=gender]:checked").value

或者

const radios = document.querySelectorAll("[name=gender]")
for (let index = 0; index < radios.children.length; index++) {
  const radio = radios.children[index];
  if (radio.checked) {
    console.log(radio.value);
    break 
  }
}

复选框

复选框的用法和单选框类似，只不过复选框是可以拥有多个值

<input type="checkbox" name="hobby" value="唱"> 唱
  <input type="checkbox" name="hobby" value="跳"> 跳
  <input type="checkbox" name="hobby" value="rap"> rap
  <input type="checkbox" name="hobby" value="打篮球"> 打篮球

它的获取方式也有两种，一种直接querySelectorAll带上合适的选择器即可

document.querySelectorAll("[name=hobby]:checked").value

另外一种也是遍历

const checkboxs = document.querySelectorAll("[name=hobby]")
for (let index = 0; index < checkboxs.children.length; index++) {
  const checkbox = checkboxs.children[index];
  if (checkbox.checked) {
    console.log(checkbox.value);
  }
}

文件选择框

最后是文件选择框，文件选择框需要通过 dom.files来获取即可，当然，它也可以通过添加 multiple 属性来实现多选

<input type="file" name="avatar" multiple>

dom.files // 获取到选中的文件

期望得到的数据结构

当我们了解了常见的表单标签后，那么我们要假设期待得到的数据结构

SLX[6I$M}J)5S5H~C79M@~Y.png

提炼关键信息：

当表单是 文本框、密码框、文本域 、单选框时，我们都可以直接通过 value属性来获取数据，并且存放时，他们是字符串类型

{
    文本框:"用户名",
    密码框:"密码",
    性别:"男"
}

当表单是下拉列表时，存放它的值需要分情况

单选的下拉列表（没有 multiple 属性)，是字符串类型

{
    城市:"广州"
}

多选的下拉列表（有 multiple 属性），是数组类型

{
    城市:["广州","东莞"]
}

{
    喜好:["唱","跳","rap"]
}

当表单是 文件选择框时，存放它的数据，是数组（因为可能多选文件)

{
    照片:[照片1,照片2]
}

编码流程

HCHU)X}6JSRFCKUI[GL}~{E.png

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>快速获取表单数据</title>
  </head>
  <body>
    <form>
      <!-- 输入姓名的文本框 -->
      <div>
        <input type="text" placeholder="请输入姓名" name="userName" />
      </div>
      <!-- 选择性别的单选按钮 -->
      <div>
        <input type="radio" name="gender" value="男" /> 男
        <input type="radio" name="gender" value="女" /> 女
      </div>
      <!-- 选择是否在世的单选按钮 -->
      <div>
        <input type="radio" name="alive" value="还在" checked /> 还在
        <input type="radio" name="alive" value="上天了" /> 上天了
      </div>
      <!-- 选择兴趣爱好的复选框 -->
      <div>
        <input type="checkbox" name="hobby" value="唱" /> 唱
        <input type="checkbox" name="hobby" value="跳" /> 跳
        <input type="checkbox" name="hobby" value="rap" /> rap
        <input type="checkbox" name="hobby" value="打篮球" /> 打篮球
      </div>
      <!-- 选择城市的下拉框 -->
      <div>
        <select name="city" multiple>
          <option value="广州">广州</option>
          <option value="东莞">东莞</option>
          <option value="佛山">佛山</option>
        </select>
      </div>
      <!-- 输入个人简介的文本域 -->
      <div>
        <textarea name="intro"></textarea>
      </div>
      <!-- 上传头像的文件输入框 -->
      <div>
        上传头像
        <input type="file" name="avatar" multiple />
      </div>
      <!-- 提交按钮 -->
      <div>
        <button>提交</button>
      </div>
    </form>
    <script>
      // 获取表单元素并存储在常量form中
      const form = document.querySelector('form')
      // 为表单添加提交事件监听器
      form.addEventListener('submit', function (e) {
        // 阻止默认的表单提交行为
        e.preventDefault()
        // 序列化表单数据，并存储在常量data中
        const data = serialize(form)
        console.log(data)
      })
      // 定义序列化函数，接收一个表单元素作为参数
      function serialize(tempForm) {
        // 创建一个空对象，用于存储序列化后的表单数据
        const data = {}
        // 获取表单中所有具有"name"属性的字段
        const formFieldList = tempForm.querySelectorAll('[name]')
        // 遍历所有表单字段
        formFieldList.forEach((field) => {
          // 检查字段的类型和标签名
          if (
            field.type === 'text' ||
            field.type === 'password' ||
            field.tagName === 'TEXTAREA'
          ) {
            // 如果是文本输入框或文本域，则将其值存储在data对象中
            data[field.name] = field.value
          } else if (field.tagName === 'SELECT') {
            // 如果是下拉框
            if (field.multiple) {
              // 如果是多选下拉框，使用reduce将选中的项的值存储在数组中
              data[field.name] = [...field.children].reduce((a, b) => {
                if (b.selected) {
                  a.push(b.value)
                }
                return a
              }, [])
            } else {
              // 如果是单选下拉框，直接将选中的项的值存储在data对象中
              data[field.name] = field.value
            }
          } else if (field.type === 'radio' && field.checked) {
            // 如果是单选按钮且被选中，则将其值存储在data对象中
            data[field.name] = field.value
          } else if (field.type === 'checkbox' && field.checked) {
            // 如果是复选框且被选中
            if (!data[field.name]) {
              // 如果该字段在data对象中不存在，创建一个数组存储值
              data[field.name] = [field.value]
            } else {
              // 如果已存在，将值添加到数组中
              data[field.name].push(field.value)
            }
          } else if (field.type === 'file') {
            // 如果是文件上传字段
            // 如果支持多文件上传，将文件对象数组存储在data对象中
            data[field.name] = field.files
          }
        })
        // 返回包含序列化后数据的对象
        return data
      }
    </script>
  </body>
</html>

2024了，你会使用原生js批量获取表单数据吗

背景

分析

常见的表单标签

文本框 input[type=text]

密码框 input[type=password]

文本域 textarea

下拉列表 select

单选框 input[type=radio]

复选框 input[type=checkbox]

文件选择框 input[type=file]

获取表单值的方式

文本框和密码框和文本域

下拉列表

单选框

复选框

文件选择框

期望得到的数据结构

编码流程

完整代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

2024了，你会使用原生js批量获取表单数据吗

背景

分析

常见的表单标签

文本框 input[type=text]

密码框 input[type=password]

文本域 textarea

下拉列表 select

单选框 input[type=radio]

复选框 input[type=checkbox]

文件选择框 input[type=file]

获取表单值的方式

文本框和密码框和文本域

下拉列表

单选框

复选框

文件选择框

期望得到的数据结构

编码流程

完整代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景