如何在将表单提交到服务器之前删除逗号分隔符？

Posted 2023-04-14

【中文标题】如何在将表单提交到服务器之前删除逗号分隔符？

【英文标题】：How to remove comma separator before submitting form to a server?

【发布时间】：2020-01-19 16:29:45

【问题描述】：

我正在处理带有用户输入的表单。这是我的代码：

<form role="search" id="default-search" action="<?php echo home_url(); ?>" novalidate>

    <input class="number" name="price-from" placeholder="Cena od" maxlength = "11" min = "0">

</form>

首先我想自动格式化用户输入，例如10000 到 10,000 以更清楚地了解输入的内容

我转换用户输入的代码是：

    jQuery.noConflict();
jQuery('input.number').keyup(function(event) 

  // format number
  jQuery(this).val(function(index, value) 
    return value
    .replace(/\D/g, "")
    .replace(/\B(?=(\d3)+(?!\d))/g, ",")
    ;
  );
);

现在一切正常。

但是！

提交此表单时，服务器“认为”10,000 = 10，而不是 10000。

所以，我需要做的是将 10,000 转换回 10000，以便服务器正确计数。

我需要用户查看其输入的格式化版本（如 10,000），而服务器应使用不带逗号的纯数字（如 10000）。

任何想法都非常受欢迎。谢谢！

【问题讨论】：

签出Intl.NumberFormat 为您的用户格式化带有分隔符的数字。并且不要改变原始值，而是将其存储并以您的形式使用。使用Number 或parseInt 将值从字符串转换为数字。

【参考方案1】：

我认为，您正在使用类型转换，因此输出 10 而不是 10000。因此，它从字符的起始索引（即逗号）截断字符。

您可以替换逗号并获得所需的输出。

var num = "10,000";
num = num.replace(',','');

然后，将其传递给服务器端。

【参考方案2】：

使用这个来删除文本中的逗号或所有逗号

let num = "10,000"
num = num.replace(/,/g, ''),

【参考方案3】：

使用当前的正则表达式和替换方法：

您只需添加一个函数，该函数将使用正则表达式和replace() 方法删除所有逗号分隔符，然后在准备好提交表单时使用parseInt() 函数将输入值转换为整数：

jQuery.noConflict();
jQuery('input.number').keyup(function(event) 

  // format number
  jQuery(this).val(function(index, value) 
    return value
    .replace(/\D/g, "")
    .replace(/\B(?=(\d3)+(?!\d))/g, ",")
    ;
  );
);

jQuery('#btn').click(function()
	const valueToSubmit  = parseInt(jQuery('input.number').val().replace(/,/, ""));
  alert("Submitting the value " + valueToSubmit);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form role="search" id="default-search" action="#" novalidate>
    <input class="number" name="price-from" placeholder="Cena od" maxlength = "11" min = "0">
    <button type="button" id="btn">Submit number</button>
</form>

使用 toLocaleString 方法：

您可以使用toLocaleString() 方法和replace() 方法自动将逗号分隔符添加到您的输入值，然后在您想将输入值提交到服务器时将它们转换回原始值，例如这个：

jQuery.noConflict();

jQuery('input.number').on('input', function(e) 
  e.target.value = parseInt(e.target.value.replace(/,/g, "")).toLocaleString();
);

jQuery('#btn').click(function() 
  const valueToSubmit = parseInt(jQuery('input.number').val().replace(/,/g, ""));
  alert("Submitting the value " + valueToSubmit);
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form role="search" id="default-search" action="#" novalidate>
    <input class="number" name="price-from" placeholder="Cena od" maxlength = "11" min = "0">
    <button type="button" id="btn">Submit number</button>
</form>

使用 纯 JavaScript，上面的 jQuery 看起来像这样：

const input = document.querySelector('#default-search input[name="price-from"]');
const btn = document.getElementById('btn');

input.addEventListener('input', function() 
  input.value = parseInt(input.value.replace(/,/g, "")).toLocaleString();
);

btn.addEventListener('click', function() 
  const valueToSubmit = parseInt(input.value.replace(/,/g, ""));
  alert("Submitting the value " + valueToSubmit);
)

<form role="search" id="default-search" action="#" novalidate>
    <input class="number" name="price-from" placeholder="Cena od" maxlength = "11" min = "0">
    <button type="button" id="btn">Submit number</button>
</form>

---

使用 Intl.NumberFormat 对象：

另一种类似的方法是使用Intl.NumberFormat 对象和replace() 方法自动将逗号分隔符添加到您的输入值，然后在您要提交输入时将它们转换回原始值对您的服务器的价值是这样的：

$('input[name="price-from"]').on('input', function(e) 
  e.target.value = new Intl.NumberFormat().format(parseInt(e.target.value.replace(/,/g, "")))
);

$('#btn').click(function() 
  const valueToSubmit = parseInt($('input[name="price-from"]').val().replace(/,/g, ""));
  alert("Submitting the value " + valueToSubmit);
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form role="search" id="default-search" action="#" novalidate>
  <input class="number" name="price-from" placeholder="Cena od" maxlength = "11" min = "0">
  <button type="button" id="btn">Submit number</button>
</form>

使用 纯 JavaScript，上面的 jQuery 看起来像这样：

const input = document.querySelector('#default-search input[name="price-from"]');
const btn = document.getElementById('btn');

input.addEventListener('input', function() 
  input.value = new Intl.NumberFormat().format(parseInt(input.value.replace(/,/g, "")))
);

btn.addEventListener('click', function() 
  const valueToSubmit = parseInt(input.value.replace(/,/g, ""));
  alert("Submitting the value " + valueToSubmit);
)

<form role="search" id="default-search" action="#" novalidate>
  <input class="number" name="price-from" placeholder="Cena od" maxlength = "11" min = "0">
  <button type="button" id="btn">Submit number</button>
</form>