Question

我曾尝试使用我在互联网上找到的很多正则表达式，但没有运气。我试图验证表单的输入范围是否在0-100之间（0和100都是有效输入）但由于某种原因错误未显示。粘贴我的代码

<form class="row" name="myForm">
    <div ng-repeat="month in plan.months" class="form-group">
        <div class="col-sm-2">{{month.label}}  : </div>
        <div class="col-sm-10">
        <input type="text"
           name="name"
           ng-model="month.value"
           class="form-control"
           ng-pattern="/^([1-9]?[0-9])$/"
        />
        <br />
    </div>
<span class="error" style="color:red" ng-show="myForm.name.$error.pattern">Please enter a Percentage value between 1 & 100</span>
    </div>
</form>

Answer 1

试试这个，

<form class="row" name="myForm">
    <div ng-repeat="month in plan.months" class="form-group">
        <div class="col-sm-2">{{month.label}}  : </div>
        <div class="col-sm-10">
        <input type="text"
           name="name"
           ng-model="month.value"
           class="form-control"
           ng-pattern="/^([0-9]|[1-9][0-9]|[1-9][0-9][0])$/"
        />
        <br />
    </div>
<span class="error" style="color:red" ng-show="myForm.name.$error.pattern">Please enter a Percentage value between 1 & 100</span>
    </div>
</form>

另请参阅this

Answer 2

这是因为由于具有相同名称的多个输入，您无法使用带有ng-repeat的常规表单。在ng-repeat中使用ng-form来获取孤立的表单。

此外，如果你想要数字，只需使用输入类型=数字，包括最小值和最大值，而不是使用ng-pattern。

参见工作示例https://jsfiddle.net/asimgeker/yjmoLtvv/

<div ng-app>
  <div ng-controller="MyCtrl">
    <div ng-repeat="month in months" class="form-group">
      <ng-form name="myForm">
        <div class="col-sm-2">{{month.label}} : </div>
        <div class="col-sm-10">
          <input type="number" min="0" max="100" name="myName" ng-model="month.value" class="form-control" />
          <br />
        </div>
        <div style="color: red" ng-show="myForm.myName.$error.max">Should be less than 101</div>
        <div style="color: red" ng-show="myForm.myName.$error.min">Should be greater than -1</div>
      </ng-form>
    </div>
  </div>
</div>

Answer 3

您是否有使用文本输入而不是数字输入的原因？

如果没有，试试这个：

https://jsfiddle.net/kqupg84y/

<form class="row" name="myForm">
        <div class="col-sm-2">{{month.label}}  : </div>
        <div class="col-sm-10">
        <input type="number"
           name="name"
           ng-model="month.value"
           class="form-control"
           min="0"
           max="100"
        />
        <br />
    </div>
  <span class="error" style="color:red" ng-show="myForm.name.$error.pattern">Please enter a Percentage value between 1 &amp; 100</span>
  {{myForm.$error}}

（为了简单起见，我删除了ng-repeat）

但这并没有回答你关于使用ng-pattern的问题。

话虽这么说，你的正则表达可能有点偏。而不是

/^([1-9]?[0-9])$/

你可以尝试：

/^[0-9]+$/

如果你想匹配0到100之间的任何数字。你的正则表达式似乎正在尝试匹配1到9之间的任何数字，可能后跟任何其他数字...但如果你试图使其包含0和100，我不确定它是否按预期工作

我通常用来检查正则表达式的工具是：

http://regexr.com/

Answer 4

您的问题是表单中的多个输入具有相同的名称。您需要为输入名称添加一些唯一性。使表单元素名称唯一的快速而简单的方法是将name属性绑定到使用$index的{{1}}的表达式，如ng-repeat。然后，您可以使用Javascript＆＃39; s bracket notation从表单控制器访问正确的表单元素：

name="month{{$index}}

这里a plunker证明了这一点。顺便说一句，你的模式错误地使字符串<div ng-repeat="month in plan.months" class="form-group"> <div class="col-sm-2">{{month.label}} : </div> <div class="col-sm-10"> <input type="text" name="month{{$index}}" ng-model="month.value" class="form-control" ng-pattern="/^[1-9]?[0-9]$|^100$/" /> <br /> </div> <span class="error" style="color:red" ng-show="myForm['month' + {{$index}}].$error.pattern"> Please enter a Percentage value between 1 & 100 </span> </div>失败，所以我添加了一个正则表达式的替代。

Answer 5

@anurag - 您提供的解决方案适用于100以上的数字，但未能获得0以下的数字＆安培; @andrew - 与你的解决方案相同，除非我输入-100（ng-maxlength = 3）正在工作，但没有抛出验证错误，但这不是我们需要的方式。

原始问题出在我的Regex上，最后代码对我有用

<form class="row" name="myForm">
    <div class="col-sm-2">{{month.label}}  : </div>
    <div class="col-sm-10">
        <input type="number"
               name="percent_monthly_targets"
               ng-model="month.value"
               class="form-control"
               ng-pattern="/^[0-9][0-9]?$|^100$/"
            />
     <br />
        <span class="alert alert-danger" ng-show="myForm.percent_monthly_targets.$error.pattern">Please enter a Percentage value between 1 &amp; 100</span>
    </div>
    </form>

ng-pattern不适用于表单验证

5 个答案: