如何使用模式验证器“仅添加大于 0 的数字”？

Question

在这种形式中，当我添加新成分时，它适用于任何数字，无论是正数还是负数。

所以，如果我添加“数量为 5 的面包”，它会显示：

如果我添加“数量为 -5 的面包”，它将显示：

我尝试使用此模式验证器：pattern="^[1-9]+[0-9]*$"

但现在“添加”按钮已禁用，无论我要添加正数还是负数...

知道为什么这不起作用吗？

Answer 1

您正在对名称字段应用模式。 将其应用于数字字段。

Answer 2

你的模式会奏效。但是，我认为值得提出三点：

1) 最重要的是，正如 Mian Taimoor Tahir 所指出的，您当前正在将模式应用于错误的输入。

2) 也就是说，一个更简单的模式是：

[1-9]\d*

3) 最后，虽然您的问题特别提到了“如何使用模式验证器......”，但我认为如果其他人也尝试使用模式属性，我认为值得在这里给出相同的答案。

即：输入可以使用type="number" 以及min=1 和step=1 参数，Nicholas K 也提到过。

看起来像这样：

<input type="number" min="1" step="1">

由于以下原因，这将是解决您的问题的更好方法：

• 这是一个更易于开发人员更新的 API
• 将插入浏览器步进器，明确这是一个数字输入
• 它将为许多移动用户带来更好的键盘
• 它将防止意外的、难以看到的错误，例如将字母 O 放入输入中
• 如果支持是一个问题，更多的浏览器（我相信）支持数字输入而不是模式属性