Question

尝试将ng-pattern与input type number.

一起使用时，我遇到了一个奇怪的问题

<input type="number" name="input" min="0" max="1000" data-ng-model="input" ng-pattern="/^[0-9]*$/">
    <div data-ng-if="Form.input.$error.pattern">Please enter an Integer number between 0 and 1000.</div>
</div>

根据我定义的正则表达式，当用户输入1.时，应显示错误。正确？

但是，在输入1.时它没有显示错误，但显示输入错误1.1为什么不显示1.？

我在这里遗失了什么？

Answer 1

要允许0到190之间的数字（包括190.0000），您可以使用type="text"然后使用以下正则表达式：

^(?:(?:\d{1,2}|1[0-8]\d)(?:\.\d+)?|190(?:\.0+)?)$

请参阅demo

^ - 字符串锚点的开头（如果它出现在字符串的开头，则仅匹配其余部分，否则会使匹配失败）
(?:(?:\d{1,2}|1[0-8]\d)(?:\.\d+)?|190(?:\.0+)?) - 一个非捕获组，仅用于分组而不记住捕获的文本。它包含2个替代方案：
- (?:\d{1,2}|1[0-8]\d)(?:\.\d+)?：
  - (?:\d{1,2}|1[0-8]\d) - 1或2个任意数字（\d{1,2}）或1后跟0，1 ... 8，然后是任意1位数。
  - (?:\.\d+)? - 可选（因为?表示匹配1或0次）匹配一个点和一个或多个数字。
- 190(?:\.0+)? - 匹配190，然后选择.和1个或多个0字符。
$ - 断言字符串的结尾（如果前面的模式后面有更多的字符，则找不到匹配项。）

非捕获组可以替换为您的案例中的捕获组，但效率和行为没有任何明显变化。然而，捕获组将它们捕获的文本保留在某个缓冲区中，因此应该更慢（尽管它实际上是无关紧要的）。此外，当在模式中使用反向引用时（当您想要匹配已经匹配的子字符串时），捕获组是必要的，但这不是这种情况。

Answer 2

你的正则表达式适用于我。

<input type="number" name="input" min="0" max="1000" data-ng-model="input" ng-pattern="/^[0-9]*$/">
    <div data-ng-if="Form.input.$error.pattern">Please enter an Integer number between 0 and 1000.</div>
</div>

以下是演示链接：http://plnkr.co/edit/HV2PAPP2gh6cH8KXyYav?p=preview

输入类型编号的ng-pattern问题

2 个答案: