使用AngularJS和Pattern / RegEx验证<input type =“number”/>

Question

所以我输入了类型编号，我想确保它只接受一个数字。我可以在服务器端做到这一点，但是使用AngularJS我无法让它工作。

以下是代码：

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

我怀疑这与我提供的模式有关[0-9]+基本上我只想在这个文本框中输入数字，任何不是由数字0到9组成的数字，我希望输入无效。

目前，我的输入字段将此aa23423视为有效输入!!

非常感谢任何帮助。

谢谢。

Answer 1

你需要使用锚点：

/^[0-9]+$/

• ^：线下锚点。
• [0-9]+ 0和9之间的一个或多个数字。
• $：行尾锚点。

因此，这匹配字符串的开头，然后匹配一个或多个数字，之后它会查找字符串结尾，因此它匹配仅包含数字的字符串，而不是其他任何内容。

否则，/[0-9]+/只会匹配aa23423的一部分，更准确地说是23423的一部分，因此会使您有效。

Answer 2

这是regexp来验证浮点数，包括正数和负数：

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

在＆text;＆＃39;文本＆＃39;中使用此正则表达式输入，例如：

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

Answer 3

模式不适用于type="number"的输入。
您可以使用type="text"，然后将值转换为数字

Answer 4

尝试将正则表达式定义为范围变量 在控制器中，它对我有用。