0

如何在 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>

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

4

4 回答 4

0

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

` $scope.startDate = null; $scope.endDate = null; 如果（！$scope.startDate）{

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

} else { if( !$scope.endDate ) { $scope.error = true; $scope.reason = "输入有效的结束日期。" } }`

于 2015-06-01T20:21:28.470 回答
0

这是我解决您问题的方法

的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 情况下添加您的提交功能。

希望能帮助到你

于 2015-06-01T21:13:31.453 回答
0

如果你不想使用任何控制器或 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 解决方案

于 2015-06-01T21:23:36.903 回答
0

您可以调用此范围函数进行任何类型的日期验证，确保在 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;
  }
};
于 2015-12-07T06:55:29.570 回答