ajax表单作为FromData提交时如何删除输入掩码？

Posted 2023-05-08

【中文标题】ajax表单作为FromData提交时如何删除输入掩码？

【英文标题】：How to remove inputmask when an ajax form is submitted as FromData?

【发布时间】：2015-09-17 10:10:25

【问题描述】：

碰巧我的 ajax 表单有一个文件上传输入，因此我必须使用 FormData 而不是简单的 .serialize() 提交它。然后我发现我的 jquery.inputmask 上的autoUnmask 不再有效。

这是一个例子： http://jsfiddle.net/btqtnumL/1/

提交表单时，.serialize() 的结果具有一个已删除输入掩码的值。但是FormData() 的结果仍然显示掩码。

内容配置：表单数据；名称=“成本”

1,000

在这种情况下，我们如何去除面具？

【参考方案1】：

首先，要从输入中获取未屏蔽的值，请使用 inputmask('unmaskedvalue') (here is a reference)。

一种方法是将输入元素重命名为类似 masked-cost 的名称，然后使用 .append() 方法。

<input name="masked-cost" .... />

在javascript中你可以做这样的事情

var formData = new FormData($form[0]);
formData.append('cost', $('input[name="masked-cost"]').inputmask('unmaskedvalue'));

在服务器端，您可以检索具有未屏蔽值的成本变量。

FormData 看起来像这样

------WebKitFormBoundaryMHLOLWal6cTPLuBG Content-Disposition: form-data; name="屏蔽成本"

1,000 ------WebKitFormBoundaryMHLOLWal6cTPLuBG Content-Disposition: form-data;名称=“成本”

1000

这是更新后的演示 http://jsfiddle.net/dhirajbodicherla/btqtnumL/2/

【讨论】：

所以你的回答意味着没有方便的设置来自动移除面具，不是吗？

AFAIK，我认为没有办法自动删除它，尤其是在使用 FormData 时，因为如果使用 $.serialize，inputmask 库会小心。

【参考方案2】：

刚刚找到另一种方法。

我们可以使用 jquery .val() 来获取不带掩码的值。

$.each($('[data-mask="integer"]'), function (idx) 
    var input = $('[data-mask="integer"]')[idx];
    var actualValue = $(input).val();
    $(input).val(actualValue);
);

然后我们可以使用$form.serialize() 获取ajax 的数据。

这样，我们就避免了FormData api的使用。

【参考方案3】：

很简单。在您的 javascript 中使用字符串的 .replace 方法和 \D 的正则表达式，它是匹配所有非数字的速记字符类。所以步骤是：

获取输入掩码字段的值。

 var number = $("#your_field_id").val();

现在使用带有 \D 正则表达式的 .replace 方法

number =  number.replace(/\D/g,'');

请记住，它只是一种技术，以上代码仅适用于数字。根据您的要求使用正则表达式。更多https://regexr.com