JS获取表单值的几种方式

const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交
    const username = document.getElementById('usernameInput').value;
    const email = document.getElementById('emailInput').value;
    // ... 获取所有其他字段的值
    console.log("提交时获取的数据:", { username, email });
    // 可以在这里进行最终验证，然后通过 AJAX 发送数据
});

这种方式的优点是集中处理，适合在数据需要整体校验、打包发送到后端时使用。比如注册、登录、订单提交这类场景，你肯定希望所有数据都填好、校验无误了再一起处理。我个人觉得，对于涉及到后端交互的表单，这种模式是必不可少的。

实时获取值，则是在用户输入或选择的过程中，即时地获取表单元素的值。这通常通过监听input、change、keyup等事件来实现。

• input事件：适用于文本输入框，只要内容发生变化就会触发。非常适合做字符计数、即时搜索过滤、密码强度提示等。
• change事件：适用于<select>、<input type="checkbox">、<input type="radio">等，当元素的值发生改变并且失去焦点时（或对于选择框、复选框、单选框，值改变即触发）触发。
• keyup事件：当用户松开键盘按键时触发，也可以用于实时获取文本框内容，但input事件通常更推荐，因为它能捕获所有输入方式（如粘贴）。

const liveInput = document.getElementById('liveInput');
liveInput.addEventListener('input', function() {
    console.log("实时输入内容:", this.value);
    // 比如：实时显示输入字符数
    document.getElementById('charCount').textContent = this.value.length;
});

实时获取的优点在于即时反馈和增强用户体验。它能让用户在填写过程中就得到提示，减少错误，提高效率。比如，一个注册页面，你可能希望用户输入用户名后立刻检查是否已被占用，或者输入密码时实时显示密码强度。虽然这些功能看起来很小，但累积起来对用户感受影响很大。

实际项目中，这两种方式往往是结合使用的。实时获取用于前端的即时校验和UI反馈，而提交时获取则用于最终的业务逻辑处理和数据发送。

批量获取表单数据：构建一个数据对象？

当表单字段不多时，一个个getElementById().value确实没什么问题。但想象一下，一个有几十个字段的复杂表单，你还一个个去取值，那代码会变得又臭又长，维护起来简直是噩梦。这时候，把所有表单数据组织成一个JavaScript对象，就显得尤为重要了。这不仅让数据结构更清晰，也方便后续的传输（比如通过AJAX发送给后端）。

这里有几种常见的做法，每种都有它的适用场景。

1. 手动映射（适用于小型或结构简单的表单）

这是最直接的方式，你依然通过ID或name获取每个元素，然后手动地把它们的值赋给一个预定义的对象属性。

function getFormDataManually() {
    const data = {
        username: document.getElementById('usernameInput').value,
        email: document.getElementById('emailInput').value,
        age: parseInt(document.getElementById('ageInput').value) || 0, // 注意类型转换
        newsletter: document.getElementById('newsletterCheckbox').checked
    };
    return data;
}

这种方式的好处是直观、可控，你可以精确地控制每个字段的键名和值的类型（比如把字符串转成数字）。但缺点是重复性高，一旦表单字段增多，代码量会迅速膨胀，而且容易出错。

2. 利用FormData API（现代Web开发推荐，尤其适合AJAX提交）

FormData是一个非常强大的Web API，专门为处理表单数据而生。它可以直接从元素构建数据，而且会自动处理各种输入类型，包括文件上传。这是我个人在做AJAX提交时最喜欢用的方式。

function getFormDataWithFormDataAPI() {
    const form = document.getElementById('myForm'); // 获取  元素本身
    const formData = new FormData(form);

    // FormData 对象可以直接用于 XMLHttpRequest 或 fetch API 发送
    // 但如果想转换成普通JS对象，需要手动遍历
    const data = {};
    for (let [key, value] of formData.entries()) {
        // 对于多选的复选框或多选下拉框，FormData会把所有值都取出来，
        // 但如果name相同，它默认只保留最后一个，需要特殊处理
        // 或者手动检查并转换为数组
        if (data[key] !== undefined) {
            if (!Array.isArray(data[key])) {
                data[key] = [data[key]];
            }
            data[key].push(value);
        } else {
            data[key] = value;
        }
    }
    return data;
}

FormData的优点是自动化程度高，尤其在处理文件上传时非常方便，它能直接构建出multipart/form-data格式的数据。缺点是，它默认不会处理同名多选（如多个复选框）为数组，需要额外的逻辑来转换。不过，对于大部分后端API，直接发送FormData对象通常就能很好地工作。

3. 遍历带有name属性的元素（灵活且可定制）

这种方式介于手动映射和FormData之间，它利用了name属性来作为对象键，通过遍历表单内的所有输入元素来动态构建数据对象。这种方式给予了我们很大的控制权，可以根据元素的类型进行不同的处理。

function getFormDataDynamic() {
    const form = document.getElementById('myForm');
    const data = {};

    // 找到所有带有 name 属性的表单元素
    const formElements = form.querySelectorAll('input, select, textarea');

    formElements.forEach(element => {
        if (!element.name) return; // 确保元素有 name 属性

        if (element.type === 'checkbox') {
            // 复选框：如果name相同，收集到数组中
            if (element.checked) {
                if (!data[element.name]) {
                    data[element.name] = [];
                }
                data[element.name].push(element.value);
            }
        } else if (element.type === 'radio') {
            // 单选按钮：只取选中的那个
            if (element.checked) {
                data[element.name] = element.value;
            }
        } else if (element.tagName === 'SELECT' && element.multiple) {
            // 多选下拉框
            data[element.name] = Array.from(element.options)
                                      .filter(option => option.selected)
                                      .map(option => option.value);
        } else {
            // 其他类型（text, number, email, textarea, select单选等）
            data[element.name] = element.value;
        }
    });

    return data;
}

这种方式的优点是高度灵活和可定制，你可以根据自己的需求精确地处理每种类型的输入，包括将同名复选框或多选下拉框的值自动收集到数组中。我个人在遇到比较复杂的表单时，经常会采用这种自定义遍历的方式，因为它能更好地满足各种数据结构的需求，避免了FormData在某些特定场景下的局限性，同时又比完全手动编写要高效得多。

选择哪种方式，最终还是取决于你的具体需求和表单的复杂程度。小表单手动映射无妨，需要发送到后端且有文件上传就考虑FormData，而当表单结构复杂，需要精细控制数据格式时，自定义遍历往往是最好的选择。

本篇关于《JS获取表单值的几种方式》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！