如何在HTML表单中创建美元金额输入字段？

Question

我有一个创建的HTML表单，该表单的字段需要花费一美元。

根据我的阅读，JavaScript无法将小数识别为数字组成部分，公认的做法是以美分输入而不是处理美元金额。

问题是，我正在编写的表单提交给一个函数，该函数读取表单输入并对其执行一些操作，并将该美元金额作为##。##格式的文本，并将拒绝任何非此确切格式的输入。

我想知道的是：是否可以创建一个包含5个字符并将第三个字符设置为永久小数点的文本框？

如果没有，有什么方法可以使用JS验证来确保输入格式正确？

谢谢！

Answer 1

我认为您将必须对其进行验证。 这篇文章有一些验证美元金额的正则表达式： 货币验证 。 它还有一些如何修剪的好点，这样用户就不能输入$ 412.234或类似的东西。

Answer 2

您无法在HTML中创建固定了特定字符的文本框。 几乎没有任何需要，因为用户键入12.34（在指定金额时）比键入1234并自动插入句点更自然。

您可以使用HTML5 pattern属性指定所需的格式。 目前尚不所有的浏览器都支持它，但是当不被支持时，它也没有害处，即使禁用了JavaScript，它也会执行检查。 当然，您应该添加JavaScript检查，在这种简单情况下，直接编写代码而不是使用任何库可能会更好：

<input pattern="\d?\d\.\d\d" maxlength=5 size=5 onchange="check(this)">
<script>
function check(elem) {
  if(!elem.value.match(/^\d?\d\.\d\d$/)) {
    alert('Error in data – use the format dd.dd (d = digit)');
  }
}
</script>

使用的正则表达式同时接受dd.dd和d.dd（省略?仅允许第一种格式）。

为了简单起见，该示例使用了alert 。 在实际页面中，您应该使用一些破坏性较小的方式来向用户发送错误信号（通常是将文本写入保留给此类消息的区域），但是实现此目的的最佳方法取决于整个页面的设计。

（使用<input type=number min=0 max=99.99 step=0.01 ...>似乎更合乎逻辑，但这会引发严重的本地化问题，并且浏览器实现type=number很差。）无法保证所发送的数据符合要求的格式，例如，在Chrome浏览器中，使用浏览器创建的控件，该数字将从0.09步进到0.1，而不是0.10，从0.99步进到1，而不是1.00等。 ）