AI 助理
备案控制台
开发者社区 安全 文章 正文

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

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

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

背景

昨天表弟问了我一个问题

WW10Z{EKZA3HBBRD7J{2GIV.png

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

CRO1]MPZETS4(AJ1LOZJO1T.png

分析

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

  1. 分析需求
  2. 编写代码
  1. 要清楚常见的表单有哪些
  2. 根据表单获取到的数据结构是什么样子

常见的表单标签

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

  1. 当下拉列表 没有添加多选时，直接 通过value属性即可获取到对应值。dom.value
  2. 当下拉列表 添加多选时 ，获取获取子元素 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

提炼关键信息：

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


{
    文本框:"用户名",
    密码框:"密码",
    性别:"男"
}
  1. 当表单是下拉列表时，存放它的值需要分情况
  1. 单选的下拉列表 （没有 multiple 属性)，是字符串类型


{
    城市:"广州"
}
  1. 多选的下拉列表 （有 multiple 属性），是数组类型


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



{
    喜好:["唱","跳","rap"]
}
  1. 当表单是 文件选择框时，存放它的数据，是数组（因为可能多选文件)


{
    照片:[照片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>


文章标签：
JavaScript
数据安全/隐私保护
关键词：
JavaScript表单
JavaScript数据
JavaScript表单数据
万少！
目录
相关文章
蓝易云
|
6天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
15 3
奔跑的数据
|
14天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据：入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据，并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库，能够模拟真实浏览器访问，支持JavaScript渲染，适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤，并提供了代码示例。此外，还给出了注意事项和优化建议，帮助读者高效地抓取和分析招生数据。
奔跑的数据
41 0
如何使用Puppeteer和Node.js爬取大学招生数据：入门指南
神明木佑
|
1月前
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
神明木佑
32 7
代码bug生产队
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享：使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享：使用Vue.js构建响应式表单
代码bug生产队
73 4
小王老师呀
|
2月前
|
JavaScript 前端开发 安全
js逆向实战之烯牛数据请求参数加密和返回数据解密
【9月更文挑战第20天】在JavaScript逆向工程中，处理烯牛数据的请求参数加密和返回数据解密颇具挑战。本文详细分析了这一过程，包括网络请求监测、代码分析、加密算法推测及解密逻辑研究，并提供了实战步骤，如确定加密入口点、逆向分析算法及模拟加密解密过程。此外，还强调了法律合规性和安全性的重要性，帮助读者合法且安全地进行逆向工程。
小王老师呀
86 11
游客j4mujezz7vm7y
|
2月前
|
移动开发 JavaScript 前端开发
js之操作表单 | 12-4
js之操作表单 | 12-4
游客j4mujezz7vm7y
35 1
cqtianxin1
|
2月前
|
移动开发 前端开发 JavaScript
JavaScript 表单
JavaScript 表单
cqtianxin1
27 9
武子康
|
1月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
武子康
23 0
派大鑫的工作室
|
1月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用，JS中数组过滤器的使用详解（附实际应用代码）
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用，JS中数组过滤器的使用详解（附实际应用代码）
派大鑫的工作室
163 0
游客j4mujezz7vm7y
|
2月前
|
JSON JavaScript 前端开发
6-19|Python数据传到JS的方法
6-19|Python数据传到JS的方法
游客j4mujezz7vm7y
33 0