有没有办法使用 jQuery 的序列化表单字段并修剪字段中的值？

Posted 2023-05-09

【中文标题】有没有办法使用 jQuery 的序列化表单字段并修剪字段中的值？

【英文标题】：Is there a way to use jQuery's serialize form fields and trim the value in the fields?

【发布时间】：2010-09-18 03:24:17

【问题描述】：

我有一个使用 jQuery 提交 ajax 帖子的表单，它将发送的表单序列化。代码如下所示：

var form = $("form");
var action = form.attr("action");
var serializedForm = form.serialize();
$.post(action, serializedForm, function(data)

  ...
);

这里的问题是，如果一个字段有尾随空格，序列化函数会将这些空格转换为加号 (+)，而此时它们应该被去除。

有没有办法在不执行以下操作的情况下修剪字段：

$("#name").val( jQuery.trim( $("#name") ) );

【参考方案1】：

您可以尝试遍历对象并修剪所有内容。

//Serialize form as array
var serializedForm = form.serializeArray();
//trim values
for(var i =0, len = serializedForm.length;i<len;i++)
  serializedForm[i] = $.trim(serializedForm[i]);

//turn it into a string if you wish
serializedForm = $.param(serializedForm);

【讨论】：

我还没有测试过这个，但这就是我想要的。谢谢。

这还能用吗？文档 (api.jquery.com/serialize) 建议它只返回一个字符串，而不是一个对象。

不错的丹尼。我已将上面的回复更改为使用 fn.serializeArray()。

【参考方案2】：

修剪 DOM 中的所有 和 元素值：

$('input, textarea').each(function()
    $(this).val(jQuery.trim($(this).val()));
);

【讨论】：

为什么$大多数地方，但jQuery.trim而不是$.trim？

【参考方案3】：

有点晚了，但这可能是你想要的：

var form = $("form");
var action = form.attr("action");
var formArr = form. serializeArray();
$.each(formArr , function(i, field) 
  formArr[i].value = $.trim(field.value);
);
var serializedForm = $.param(formArr);
$.post(action, serializedForm, function(data)

  ...
);

【参考方案4】：

您可以在提交之前遍历所有输入并修剪。

$("input, textarea").each(function()
   $(this).val(jQuery.trim($(this).val()));
);

【参考方案5】：

这些解决方案都不起作用，因为它们实际上会更改页面上的表单字段。我只想修改字段的值，而不改变用户输入的内容。

【讨论】：

在序列化之前调用修剪代码。保留用户键入内容的修剪和未修剪实例有什么好处？也许有一个我不知道的合理用例。

【参考方案6】：

您可以做的一件事是拥有一个带有隐藏值的单独表单，并在用户提交时将实际的、修剪后的表单值存储在隐藏值中，然后您可以序列化“隐藏”表单并发布它。只是一个想法。

【参考方案7】：

如果您使用的 ASP.NET 每页只能有一个表单，则只能提交给定 DIV 的值，如下所示：

var dataString = "source=contactDiv";
dataString += getDataString(divId, "input"); // add inputs
dataString += getDataString(divId, "select"); //add select elements

然后按如下方式发布更新：

$.post("UpdateContact.aspx",
        dataString,
        afterUpdate,
        "json");

辅助函数

function afterUpdate(data)
//add some post-update info


function getDataString(divId, tagName) 
    var data = "";
    var elements = $("#" + divId + " " + tagName);
    for (var i = 0; i < elements.length; i++) 
        var el = elements[i];
        var name = el.name;
        var value = $(el).val();
        if (value != null && value != "undefined")
            value = $.trim(value + ""); //added "" to fix IE 6 bug for empty select     
        if (el.type == "checkbox")
            value = el.checked;
        else if (el.type == "radio" && !el.checked)
            value = "";
        if (!(value == "" || value == "undefined" || name == "" || name == "undefined"))
            data += "&" + name + "=" + escape(value);
    

    return data;

【参考方案8】：

如果你已经包含了 jquery 文件然后使用这个脚本

var formFilters = $('input, textarea');
        formFilters.each(function()
            $(this).val($(this).val().trim());
        );