【问题标题】:How to remove inputmask when an ajax form is submitted as FromData?ajax表单作为FromData提交时如何删除输入掩码?
【发布时间】:2015-09-17 10:10:25
【问题描述】:

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

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

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

内容配置:表单数据;名称=“成本”

1,000

在这种情况下,我们如何去除面具?

【问题讨论】:

    标签: javascript jquery ajax jquery-inputmask


    【解决方案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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2011-12-12
        • 1970-01-01
        • 2021-09-28
        • 2018-09-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多