详细介绍：如何使用 form-serialize 实现表单数据快速收集

还是鼠鼠

已于 2025-02-01 20:15:27 修改

阅读量634

点赞数 18

分类专栏： Ajax技术从入门到实战文章标签： ajax 前端 javascript bootstrap web vscode node.js

于 2025-01-25 12:22:36 首次发布

本文链接：https://blog.youkuaiyun.com/2402_84971234/article/details/145354569

版权

Ajax技术从入门到实战专栏收录该内容

49 篇文章

订阅专栏

功能概述

代码实现

1. form-serialize 插件源码

2. HTML 示例代码

总结

在表单处理过程中，手动提取用户输入的数据可能会显得繁琐且容易出错。form-serialize 是一个强大的工具，可以帮助你快速、准确地收集表单中的数据，并将其转换为对象或 URL 编码字符串，便于后续使用和提交。本教程通过完整代码和详细说明，帮助开发者快速掌握其用法。

功能概述

form-serialize 提供了一种简单而灵活的方法，支持：

将表单数据转换为 JavaScript 对象或 URL 编码字符串。
自动处理多选框、单选按钮、多选下拉框等复杂表单元素。
可选配置，包括序列化空字段、禁用字段和自定义序列化方法。

代码实现

以下是实现表单数据序列化的完整源码，包括 form-serialize 的功能定义和 HTML 示例代码。您可以直接复制使用。

1. `form-serialize` 插件源码

以下是插件的完整代码，请将其保存为 form-serialize.js 文件。

// form-serialize.js

var k_r_submitter = /^(?:submit|button|image|reset|file)$/i;
var k_r_success_contrls = /^(?:input|select|textarea|keygen)/i;
var brackets = /(\[[^\[\]]*\])/g;

function serialize(form, options) {
    if (typeof options != 'object') {
        options = { hash: !!options };
    } else if (options.hash === undefined) {
        options.hash = true;
    }

    var result = options.hash ? {} : '';
    var serializer = options.serializer || (options.hash ? hash_serializer : str_serialize);
    var elements = form && form.elements ? form.elements : [];
    var radio_store = Object.create(null);

    for (var i = 0; i < elements.length; ++i) {
        var element = elements[i];
        if ((!options.disabled && element.disabled) || !element.name) continue;
        if (!k_r_success_contrls.test(element.nodeName) || k_r_submitter.test(element.type)) continue;

        var key = element.name;
        var val = element.value;

        if ((element.type === 'checkbox' || element.type === 'radio') && !element.checked) val = undefined;
        if (options.empty) {
            if (element.type === 'checkbox' && !element.checked) val = '';
            if (element.type === 'radio') {
                if (!radio_store[element.name] && !element.checked) {
                    radio_store[element.name] = false;
                } else if (element.checked) {
                    radio_store[element.name] = true;
                }
            }
            if (val == undefined && element.type == 'radio') continue;
        } else {
            if (!val) continue;
        }

        if (element.type === 'select-multiple') {
            val = [];
            var selectOptions = element.options;
            var isSelectedOptions = false;
            for (var j = 0; j < selectOptions.length; ++j) {
                var option = selectOptions[j];
                if (option.selected && (option.value || (options.empty && !option.value))) {
                    isSelectedOptions = true;
                    if (options.hash && key.slice(key.length - 2) !== '[]') {
                        result = serializer(result, key + '[]', option.value);
                    } else {
                        result = serializer(result, key, option.value);
                    }
                }
            }
            if (!isSelectedOptions && options.empty) {
                result = serializer(result, key, '');
            }
            continue;
        }

        result = serializer(result, key, val);
    }

    if (options.empty) {
        for (var key in radio_store) {
            if (!radio_store[key]) result = serializer(result, key, '');
        }
    }

    return result;
}

function parse_keys(string) {
    var keys = [];
    var prefix = /^([^\[\]]*)/;
    var children = new RegExp(brackets);
    var match = prefix.exec(string);

    if (match[1]) keys.push(match[1]);
    while ((match = children.exec(string)) !== null) {
        keys.push(match[1]);
    }

    return keys;
}

function hash_assign(result, keys, value) {
    if (keys.length === 0) {
        result = value;
        return result;
    }

    var key = keys.shift();
    var between = key.match(/^\[(.+?)\]$/);

    if (key === '[]') {
        result = result || [];
        if (Array.isArray(result)) {
            result.push(hash_assign(null, keys, value));
        } else {
            result._values = result._values || [];
            result._values.push(hash_assign(null, keys, value));
        }
        return result;
    }

    if (!between) {
        result[key] = hash_assign(result[key], keys, value);
    } else {
        var string = between[1];
        var index = +string;
        if (isNaN(index)) {
            result = result || {};
            result[string] = hash_assign(result[string], keys, value);
        } else {
            result = result || [];
            result[index] = hash_assign(result[index], keys, value);
        }
    }

    return result;
}

function hash_serializer(result, key, value) {
    var matches = key.match(brackets);
    if (matches) {
        var keys = parse_keys(key);
        hash_assign(result, keys, value);
    } else {
        var existing = result[key];
        if (existing) {
            if (!Array.isArray(existing)) {
                result[key] = [existing];
            }
            result[key].push(value);
        } else {
            result[key] = value;
        }
    }
    return result;
}

function str_serialize(result, key, value) {
    value = value.replace(/(\r)?\n/g, '\r\n');
    value = encodeURIComponent(value).replace(/%20/g, '+');
    return result + (result ? '&' : '') + encodeURIComponent(key) + '=' + value;
}

2. HTML 示例代码

以下 HTML 文件展示了如何在表单提交时，利用 form-serialize 快速收集数据。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Serialize 示例</title>
</head>
<body>
  <form action="javascript:;" class="example-form">
    <input type="text" name="username" placeholder="用户名">
    <br>
    <input type="password" name="password" placeholder="密码">
    <br>
    <input type="button" class="btn" value="提交">
  </form>

  <!-- 引入 form-serialize.js -->
  <script src="./form-serialize.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      document.querySelector('.btn').addEventListener('click', () => {
        const form = document.querySelector('.example-form');
        const formData = serialize(form, { hash: true, empty: true });
        console.log(formData); // 控制台输出表单数据
      });
    });
  </script>
</body>
</html>