javascript - ng-pattern 不适用于数字输入

Question

我正在尝试实现允许正数或负数的输入数字字段。
我对 ng-pattern 使用了 "/^0|[1-9]\d*$/" 正则表达式。 但它不起作用。对于字符输入，它没有显示任何错误。 我已经粘贴了我的代码 here .

更新

我不想按要求制作此字段。我只想验证数字(不允许使用章程)。

Answer 1

您的代码有几个问题:

1. 模式/^0|...$/被解释为 /(^0)|(...$)/ .因此，您的模式将接受任何以 0 开头的字符串。 (无论后面是什么)或以 [1-9] 中的任何数字结尾(可选地后跟任意数量的数字)。
   正确的模式是:/^(0|[1-9][0-9]*)$/ (注意 \d 将匹配比 [0-9] 更多的字符，例如阿拉伯数字符号等)。

2. 浏览器按以下方式处理number类型的输入元素:
   如果他们的内容不是有效数字，那么他们的 value属性设置为 '' .
   因此，输入 1w3将导致 value为空字符串，因此不会应用模式。
   您应该使用 text 类型的输入元素.

3. (这与您的问题没有直接关系，但我在您的 fiddle 中注意到，您使用的是 <form>.<input>.$invalid，而不是(可能)预期的 <form>.<input>.$valid。
   $invalid是 property of the FormController 仅。)

---

基于以上内容，您的代码应该看起来更像这样:

<input type="text" name="price_field" ng-model="price"
       ng-pattern="/^(0|[1-9][0-9]*)$/" />

(也接受负数，将 ng-pattern 更改为 /^(0|\-?[1-9][0-9]*)$/ 。)

另请参阅此 short demo .
<子> (更新:该演示已更新，以说明数字字段和文本字段之间以及不同模式之间的差异。)