AngularJS 日期验证

Question

如何在 AngularJS 表单中对以下代码进行日期控制验证？

<label for="startDate" class="control-label">Start Date:</label>
<div class="">
    <input type="date" class="form-control" 
           id="startDate" ng-model="startDate" />
</div>

<label for="endDate" class="control-label">End Date:</label>
<div class="">
    <input type="date" class="form-control" 
           id="endDate" ng-model="endDate" />
</div>

<div class="alert alert-warning" ng-show="">
    // ??
</div>

如果只输入了其中一个日期，则表单应提示输入另一个日期。如果两个日期都为空，或者都输入了，那么它应该会成功提交表单。

Answer 1

您需要通过连接控制器来完成此操作。检查 $scope.startDate 是否为空。如果 !empty，则 $scope.endDate 必须为 !empty，否则不会出错。

` $scope.startDate = 空； $scope.endDate = 空；如果（！$scope.startDate）{

if(!$scope.endDate) { $scope.error = false }

} else { if( !$scope.endDate ) { $scope.error = true; $scope.reason = "Enter valid end date." } `

Answer 2

这是我解决你问题的方法

HTML

<label for="startDate" class="control-label">Start Date:</label>
<div class="" >
    <input type="date" class="form-control" 
           id="startDate" ng-model="startDate" />
</div>

<label for="endDate" class="control-label">End Date:</label>
<div class="">
    <input type="date" class="form-control" 
           id="endDate" ng-model="endDate" />

</div>
<span>{{errMessage}}</span>
    <button ng-click='checkErr(startDate,endDate)'>Submit</button>

将此代码添加到 HTML

的控制器中

$scope.checkErr = function(startDate,endDate){
    $scope.errMessage = '';

    if(!startDate && endDate){
      $scope.errMessage = 'please Enter Start Date';
      return false;
    }
    if(!endDate && startDate){
       $scope.errMessage = 'please Enter End Date';
       return false;
    }
    if(endDate && startDate || !endDate && !startDate ){
       $scope.errMessage ='Successfully Submitted';
       // you can add you submit function here  
    }
  };

如果输入了其中一个日期并且还剩下一个，这将在提交按钮上方显示错误消息。它将显示用户应输入哪些日期，如果两个日期都已输入或两个日期均未输入，它将显示已成功提交。您可以在 if 情况下添加提交功能。

希望对您有所帮助

Answer 3

如果您不想使用任何控制器或 js 而想使用纯 HTML。试试这个方法

将您的 HTML 编辑为：

<label for="startDate" class="control-label">Start Date:</label>
<div class="">
    <input type="date" class="form-control" 
           id="startDate" ng-model="startDate" />
</div>

<label for="endDate" class="control-label">End Date:</label>
<div class="">
    <input type="date" class="form-control" 
           id="endDate" ng-model="endDate" />
</div>

<div class="alert alert-warning" ng-show="!startDate && endDate ||startDate && !endDate ">
    // Do what ever you want to do here 
</div>

也添加了这个答案，以便您可以选择最适合您的答案。如果你想在提交上做更多的功能，我强烈建议你使用控制器。如果您只对 UI 感兴趣，请继续使用简单的 HTML 解决方案

Answer 4

您可以调用此范围函数进行任何类型的日期验证，确保在 ng-submit 上触发 dateValidator(year,month,date)

$scope.dateValidator = function(year, month, date) {

  var dates = new Date(year, month - 1, date);
  if (dates.getFullYear() == year && dates.getMonth() + 1 == month && dates.getDate() == date) {
    alertify.success('Valid Date');

  } else {
    alertify.error('Invalid date');
    return false;
  }
};

AngularJS 日期验证

AngularJS date validation

angularjs

validation

angular-ui-datepicker