當正則表達式限制為數字時，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/