AngularJS - 日期输入和数字输入验证

我有两个基本的输入框在我的网站（一个输入日期和一个输入号码）：AngularJS - 日期输入和数字输入验证

- 对于日期输入我能够设定最低和最高时用户从日历中选择日期，但在手动编写日期时，不遵守最小值和最大值。我想知道如何解决此问题，以便用户输入尊重最小值和最大值的日期。

- 对于数字输入，它只需要接受正值。另外，如果键入的值为0，我想显示错误消息或在输入字段中输入一个红色框。

2016-11-09 Álvaro

对于第一个问题，你可以把NG-变化的功能，并通过它内部的模型，并在控制器的其他方式验证你可以编写自定义的验证指令，但我怀疑有真正需要为那。
```
<input type="text" 
     datepicker-popup="dd-MMMM-yyyy" ng-model="myDate" 
     ng-change="checkDate(myDate)/> 
```

和内部控制

$scope.checkDate(date) { 
    if(date < new Date()) { 
    $scope.dateError = true 
    } 
}

，并在您的视图

<p ng-show="$scope.dateError"> 
    Please enter date bigger then today 
</p>

有一个最小的属性，可以让你设置你的情况的最小允许值是应该是1

为了显示错误，你可以使用一个类似的东西

<p ng-show="yourFormName.fieldName.$invalid"> 
    Please enter something else 
</p>

希望这有助于下面的代码

来源

2016-11-09 09:33:00

需要注意的是，这意味着您的输入必须完全表单标签内，角度不能做验证一个输入不是一个形式的标签。 – Walfrat

是的，这是正确的谢谢添加，我也建议添加去抖动到日期验证，以便验证将不会被解雇 –

谢谢，这将工作。问题是我使用输入类型日期而不是文本。我知道它不适用于Firefox或资源管理器，但现在我需要的是我的网站。 –

检查..

<form name="myForm" ng-controller="ExampleController"> 
    <label>Number: 
    <input type="number" name="input" ng-model="example.value" 
      min="0" max="99" required> 
</label> 
    <div role="alert"> 
    <span class="error" ng-show="myForm.input.$error.required"> 
     Required!</span> 
    <span class="error" ng-show="myForm.input.$error.number"> 
     Not valid number!</span> 
    </div> 

<label>Email Address: 
    <input type="email" name="txtemail" ng-model="example.email" 
      required> 
</label> 
    <div role="alert"> 
    <span class="error" ng-show="myForm.txtemail.$error.required"> 
     Required!</span> 
    <span class="error" ng-show="myForm.txtemail.$error.email"> 
     Not valid number!</span> 
    </div> 
</form>

来源

2016-11-09 09:40:14

谢谢，这对未来的验证会很有用。 –

请找到答案你的第二个问题如下。

对于数字输入，它只需要接受正值。另外，如果键入的值是0，我希望显示错误消息或在输入字段中输入一个红色框。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 

 
$scope.showError = function(data){ 
 
$scope.isError=false; 
 
if(data==0) 
 
$scope.isError=true; 
 
} 
 
    
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<input type="number" min="0" ng-change="showError(inputValue)" ng-model="inputValue"></input> 
 
<p ng-show="isError" style="color:red">Error msg - you typed Zero</p> 
 
</body> 
 
</html>

来源

2016-11-09 09:41:04

谢谢，这对我很有用。我在考虑如果用户点击保存按钮时的输入数字，然后显示一条警告消息，以防止用户在输入数字等于0时保存信息 –

AngularJS - 日期输入和数字输入验证

回答

相关问题