ng-pattern不适用于数字输入

Question

我正在尝试实现输入数字字段,这将允许正数或负数.
我使用了"/^0|[1-9]\d*$/"正则表达式来表示ng-pattern.但它不起作用.对于字符输入,它没有显示任何错误.我在这里粘贴了我的代码.

更新

我不想根据需要创建此字段.我只想要数字验证(不允许使用章程).

Answer 1

您的代码存在一些问题:

1. 该模式/^0|...$/被解释为/(^0)|(...$)/.因此,您的模式将接受任何以0(1-无论如何)开头或以[1-9]中的任何数字结尾的字符串(可选地后跟任意数量的数字).
   正确的模式是:( /^(0|[1-9][0-9]*)$/注意\d将匹配比[0-9]更多的字符,例如阿拉伯数字符号等).

2. 类型编号的输入元素由浏览器按以下方式处理:
   如果其内容不是有效数字,则将其value属性设置为''.
   因此,输入1w3将导致为value空字符串,因此不会应用模式.
   您应该使用类型的输入元素text.

3. (这与你的问题没有直接关系,但我注意到你的小提琴,你使用的<form>.<input>.$invalid,而不是(可能)意图<form>.<input>.$valid.
   $invalid是唯一的属性FormController.)

基于以上所述,您的代码看起来应该更像这样:

<input type="text" name="price_field" ng-model="price"
       ng-pattern="/^(0|[1-9][0-9]*)$/" />

(对于接受负数,也ng-pattern改为/^(0|\-?[1-9][0-9]*)$/.)

另见这个简短的演示.
_{(更新:演示已更新,以说明数字和文本字段之间以及不同模式之间的差异.)}