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

【问题标题】：ng-pattern allows '+' character when regex limits to digits当正则表达式限制为数字时，ng-pattern 允许“+”字符
【发布时间】：2016-12-02 17:21:52
【问题描述】：

我使用正则表达式 /^[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 - false

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

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

【问题讨论】：

@WiktorStribiżew 为什么它不能与 type="number" 一起使用？使用 type="text" 浏览器也可以让用户输入任意字符。
好吧，正则表达式使用 string 输入，正则表达式引擎不允许任何其他 type 作为输入。因此，只有password、text 通常是可以使用正则表达式的有效类型。

标签： javascript angularjs regex ng-pattern angularjs-ng-pattern

【解决方案1】：

如果要使模式起作用，则需要将type 属性设置为text。由于您还想让用户在输入字段中键入 only 位，因此添加 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 正则表达式。

【讨论】：

【解决方案2】：

你可以使用：

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

不将输入类型设置为数字（默认为文本，应该可以正常工作）。

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

【讨论】：