当正则表达式限制为数字时，ng-pattern允许使用“ +”字符

Question

我使用正则表达式/ ^ [0-9] + $ /将文本框的输入限制为仅接受数字。 它工作正常，但是当类似+124的类型时，也不会将文本框设置为无效。

<form name="myForm" novalidate>
  <input type="number" ng-model="age" name="age" ng-pattern="/^[0-9]+$/" />
  <h3>Valid Status : {{myForm.age.$valid}}</h3>
</form>

输入：123输出：myForm.age。$ valid-true

输入：-123输出：myForm.age。$ valid-假

输入：+123输出：myForm.age。$ valid-true（不应该为true）

https://plnkr.co/edit/3OVE6qiWgJozUb3hyFQ5?p=preview

Answer 1

如果要使模式起作用，则需要将type属性设置为text 。 由于您还希望用户仅在输入字段中键入数字，因此添加onkeypress验证：

<input type="text"  onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57" ng-model="age" name="age" ng-pattern="/^[0-9]+$/" />

实际上，那时您甚至不需要ng-pattern正则表达式。

Answer 2

您可以使用：

ng-pattern="/^[0-9]+$/"

无需将输入类型设置为数字（默认情况下为文本，应该可以正常使用）。

这里是JSFiddle： https ://jsfiddle.net/3ju3b2tu/1/