Question

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

更新

我不想根据需要创建此字段。我只想要数字验证（不允许使用章程）。

Answer 1

您的代码存在一些问题：

模式/^0|...$/被解释为/(^0)|(...$)/。因此，您的模式将接受以0开头的任何字符串（无论如何）或以[1-9]中的任何数字结尾（可选地后跟任意数量的数字）。
正确的模式是：/^(0|[1-9][0-9]*)$/（请注意\d将匹配比[0-9]更多的字符，例如阿拉伯数字符号等。
类型编号的输入元素由浏览器按以下方式处理：
如果其内容不是有效数字，则其value属性设置为'' 因此，输入1w3会导致value为空字符串，因此不会应用模式。
您应该使用text类型的输入元素。
（这与您的问题没有直接关系，但我注意到您使用的是<form>.<input>.$invalid，而不是（可能）预期的<form>.<input>.$valid。 $invalid仅限 property of the FormController 。）

基于以上所述，您的代码应该更像这样：

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

（如果接受负数，请将ng-pattern更改为/^(0|\-?[1-9][0-9]*)$/。）

另请参阅此 short demo <子> （更新：该演示已更新，以说明数字和文本字段之间以及不同模式之间的差异。）

Answer 2

为什么不将required与min一起使用。所以我们可以写：

<div ng-app ng-controller="formCtrl">
    <form name="myForm" ng-submit="onSubmit()">
        <input type="number"
               ng-model="price" 
               ng-init="price=0"
               name="price_field"
               min="0"                  
               required
              >
        <span ng-show="myForm.price_field.$error.required ||
                       myForm.price_field.$error.min">Not a valid number!</span>

        <input type="submit" value="submit" />
    </form>
</div>

演示 Fiddle

如果您仍想使用模式，请删除type="number"。我不确定但是number类型的声音有自己的模式，这就是为什么它不起作用的原因。

这是第二次演示 Fiddle

Answer 3

仅使用htm5模式输入数字

<input type="number" name="country_code" pattern="[0-9]" >

http://www.w3schools.com/tags/att_input_pattern.asp

ng-pattern不适用于数字输入

更新

3 个答案: