日期输入和数字输入验证

AngularJS - Date input and Number input validation

本文关键字：验证 数字输入 输入 日期      更新时间：2023-09-26

我的网站有两个基本的输入字段(一个输入日期和一个输入数字):

-对于日期输入，当用户从日历中选择日期时，我能够设置最小值和最大值，但当手动编写日期时，这些最小值和最大值不受尊重。我想知道我怎样才能解决这个问题，这样当用户输入日期时，最小值和最大值就会得到尊重。

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

  • 对于第一个问题，你可以在ng-change上放置一个函数，并在它的模型中传递并在控制器中验证可以写一个自定义验证器指令，但我怀疑有真正的需要。

        <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>
  • 有一个min属性，可以让你设置一个最小接受值，在你的情况下，它应该是1

要显示错误，你可以使用像这样的

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

希望能有所帮助

检查下面的代码…

<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>

请在下面找到第二个问题的答案。

  • 对于输入的数字，只接受正数。此外，如果输入的值为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>

相关文章：