允许不同货币和地区的本地化货币输入

Question

在我的网络应用程序中，我需要允许用户在输入字段中输入资金。货币以及金额的格式可以在不同的字段中有所不同。因此，虽然用户可以在一个字段中输入：

$1,234.56

对于美国地区的美元，他们可以在另一个地区输入：

€ 1.234,56

以德国为区域的欧元。

无论货币是什么以及金额格式化的区域，内部的值应以相同的方式返回，在这种情况下将是：

1234.56

我可以使用类型设置为“text”的输入字段，但是我必须编写代码来检查货币符号以及值的格式。但是用户可能没有输入货币符号。此外，我没有看到区分没有货币符号的区域数字的明确方法。

是否有任何解决方案允许用户选择货币符号并管理输入的值以提供一致的内部值？

Answer 1

如果有一种方法可以使用一个特定类型的HTML输入来实现这一点，我不知道它，最接近的将是type=number，虽然这不允许格式化的数字。

对于文本类型并且使用代码检查输入，如果您可以假设数字始终被格式化为拉丁数字，则可以使用使用正则表达式的相当天真的方法。

function normalize(currency) {
  const naive = /(?:(-)\s*)?(?:[^0-9]+\s*)?([0-9]{1,3}(?:[ ,\.]?[0-9]{3})*)(?:[,\.]([0-9]+))?(?:\s*[^0-9-]+)?(?:\s*(-))?/;
  const [,mina,base,fraction,minb] = currency.match(naive)||[];
  const min = mina || minb ? '-' : '';
  
  return base ? Number(`${min}${base.replace(/[^\d]+/g, '')}.${fraction||0}`) : '';
}


const output = document.querySelector('output');

document.querySelector('input[name=currency]')
  .addEventListener('input', (event) => {
    const { value } = event.target;
    
    output.value = normalize(value);
  });

<label>
  amount <input type=text name=currency>
</label>

<div>
  The normalized value: <output></output>
</div>

表达式围绕以下概念构建：

• (?:(-)\s*)?(?:[^0-9]+\s*)?：减号可以在数字之前，可选地后跟货币符号
• ([0-9]{1,3}(?:[ ,\.]?[0-9]{3})*)：一个基数，可能包含分组符号和三个数字组
• (?:[,\.]([0-9]+))?：可选的分数，用逗号或句号表示
• (?:\s*[^0-9-]+)?(?:\s*(-))?：减号可以在数字后面，可选地前面是货币符号

这适用于很多用例，但我认为这很天真，主要是因为它没有验证“千位分隔符”还没有被用作分数分隔符。

a more thorough example