Question

我创建了一个HTML表单，其中包含一个需要花费一美元金额的字段。

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

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

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

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

谢谢！

Answer 1

我认为你必须验证它。这篇文章对验证金额有一些很好的正则表达式：Currency validation。它还有一些关于如何修剪的好点，以便用户不能输入$ 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等。

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

2 个答案: