如何只允许数字0-5在<输入>使用AngularJS

How to only allow the numbers 0-5 in <input> fields with AngularJS?

本文关键字：输入 AngularJS 使用 许数字 数字      更新时间：2023-09-26

我有一个这样的输入字段:

<input ng-model="newtodo.effort" ng-enter="addTodo()" type="number" min="0" max="5"
       maxlength="1" size="1" step="1" class="form-control marginBottom"
       placeholder="Aufwand" aria-describedby="basic-addon2" required></input>

JavaScript/角控制器 

$scope.addTodo(todo) {
    restservice.addTodo(todo); // Does call to REST service backend
}

在上面的输入字段中，我只允许整数0、1、2、3、4和5。

不允许是浮点数(例如1.4)，字符(例如foo)和小于0或大于5的值。

输入字段可以不为空!

正如你所看到的，我已经使用HTML5的输入属性，但我知道我不能依赖这些。此外，我还检查服务器端输入的值是否符合我的限制。到目前为止一切顺利，但为了提高我的web应用程序的可用性和响应性，我还想使用AngularJS在JavaScript中验证这些值。我该怎么做呢?我知道我可以在$scope.addTodo(todo)中实现复杂的值检查，然后输出错误消息给用户，如果他/她输入的值不ok，但我不知怎么地"觉得"有一个更好的，更容易的"角化"的方式使用RegEx和1-liner?如果是这样，请告诉我如何用Angular的方式做到这一点。谢谢!

您可以将以下属性添加到您的输入字段:

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

并验证如下:

function formCtrl($scope) {
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
  <form name="myForm">
    <input type="number" ng-model="newtodo.effort" name="effort" ng-pattern="/^[0-5]$/" ng-enter="addTodo()" step="1" class="form-control marginBottom" placeholder="Aufwand" aria-describedby="basic-addon2" required>
    <span ng-show="myForm.effort.$error.pattern">The number must be between 0-5</span>
    <span ng-show="myForm.effort.$error.number">No characters allowed</span>
    <span ng-show="myForm.effort.$error.required && !myForm.effort.$error.number">The field is required</span>
  </form>
</div>

你可以使用ngPattern来设置你想要验证的正则表达式。

详细信息请参考文档:https://docs.angularjs.org/api/ng/directive/input

相关文章：