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 - 日期輸入和數字輸入驗證

回答

相關問題