使用AngularJS和Pattern/RegEx验证<input type="number"/>。

Question

我的input类型为数字，我希望它只能接受数字。在服务器端我可以做到这一点，但是在AngularJS中我无法实现。

以下是代码：

<input type="number" ng-pattern="/[0-9]+/" name="numOfFruits" ng-model="basket.numOfFruits" />

我猜测这与我提供的模式有关 [0-9]+，基本上我只想在这个文本框中输入数字，任何由0到9以外的数字组成的内容都是无效的。

目前，我的输入框将aa23423视为有效输入！

- J86

Answer 1

您需要使用锚点：

/^[0-9]+$/

• ^: 匹配行首锚点。
• [0-9]+: 匹配一个或多个数字 (0-9)。
• $: 匹配行尾锚点。

因此，这个正则表达式会匹配字符串的开头，然后匹配一个或多个数字，在此之后它会寻找字符串的结尾，所以它会匹配只包含数字而没有其他字符的字符串。

否则，/[0-9]+/ 只会匹配 aa23423 的一部分，准确地说是数字 23423，因此会给出有效结果。

- Ibrahim Najjar

---

@Ciwan 那么问题就在其他地方了，正则表达式完全没有问题。 - Ibrahim Najjar

谢谢，我刚刚也在测试中尝试了你的正则表达式，它完美地工作了！！为什么在AngularJS中会失败 :/ - J86

很遗憾，我不熟悉AngularJS。我只会正则表达式。 - Ibrahim Najjar

@Ciwan，你使用的 Angular 版本是哪个？ - artur grzesiak

在AngularJS中，实际上并不是一个bug。一些浏览器在处理“input[type=number]”时，如果不是有效的数字，则会将其值更改为“”。因此，Angular评估“”为空，认为“required”无效，而不是数字或正则表达式错误。 - atdrago

Answer 2

这里是用于验证正负浮点数的正则表达式：

/^-?[0-9]\d*(\.\d+)?$/

在“text”输入框中使用此正则表达式，例如：

<input type="text" ng-model="score" ng-pattern="/^-?[0-9]\d*(\.\d+)?$/" required/>

- Eugene Fidelin

Answer 3

正则表达式不能用于 type="number" 的输入。
您可以使用 type="text"，然后将值转换为数字

- user3827964

---

如果用户输入被视为数字（例如type="number"），则模式将捕获任何其他内容（即，如果您指定字符串的长度或是否可以包含点）。 （在Firefox上测试过） - Cedric

Answer 4

尝试将您的正则表达式定义为作用域变量，在控制器中，这对我很有效。

- yotamsha

---

请看这里，integerval 的定义方式：http://sravi-kiran.blogspot.co.il/2013/02/FormValidationUsingAngularJS.html?m=1 - yotamsha