如何仅在AngularJS中允许<input>字段中的数字0-5？

我有一个输入字段是这样的：如何仅在AngularJS中允许<input>字段中的数字0-5？

HTML

<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)中执行复杂的值检查，然后向用户输出错误消息，如果他/她输入的值不正确，但我以某种方式“感觉”使用RegEx存在更好，更容易的“棱角分明” 1班轮？如果是这样，请向我解释如何以角度方式做到这一点。谢谢！

来源

2015-07-19 Timo

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

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>

来源

2015-07-19 12:05:11

谢谢，但我怎么能输出一个有用的错误消息？例如，如果用户输入了1.6，我想显示一条错误消息，如下所示：'不允许使用浮点数'。但是如果用户输入“foo”，我想显示：'这里没有文字允许' – Timo

我添加了一个jsfiddle，显示了如何做到这一点。 –

谢谢，为那个小提琴。这只会显示一个通用的错误消息，即用户输入的值与模式不匹配，但是没有办法根据输入提供更详细的错误消息？例如。如果用户输入非数字或“输入值为高”（如果他输入值8）或“输入字段是必需的”（如果他根本没有输入任何内容），“不允许输入字符” – Timo

您可以使用ngPattern设置要验证对正则表达式。

Reffer到文档的更多细节：https://docs.angularjs.org/api/ng/directive/input

来源

2015-07-19 12:07:50 nipuna777

如何仅在AngularJS中允许<input>字段中的数字0-5？

回答

相关问题