1

使用 AngularJS，如何验证 date2 < date1 和 date3 > date2。

<form name='myForm'>
       date1: <input type='text' name='date1' ng-model='obj.date1' required pattern='datePattern'/>
              <div ng-show='obj.date2 > obj.date1'>date1 has to be greater than date2</div>
       date2: <input type='text' name='date2' ng-model='obj.date2' required pattern='datePattern'/>
       date3: <input type='text' name='date3' ng-model='obj.date3' required pattern='datePattern'/>

       <input type='button' ng-click='saveData(obj)'/>
</form>

用例（用户输入）：

  • 日期 2 = 2013 年 1 月 15 日
  • date1 = 1/14/2013（出现错误：date1 必须大于 date2）
  • 日期 3 = 2013 年 1 月 16 日
  • 用户更改 date1 = 1/20/2013（错误消失并且 date1 现在有效，因为 date1=1/20/2013 大于 date2=1/15/2013）
  • 用户更改 date2 = 1/30/2013 ---我如何从这里触发 date1 中的验证，以便消息“date1 必须大于 date2”并使 date1 无效？
4

2 回答 2

1

您可以使用函数来比较与日期关联的时间戳，如下所示：

function ctrl($scope){
$scope.compareDates=function( first, second){
     dFirst=new Date(first);
     dSecond=new Date(second);
    console.log(first, second, dFirst, dSecond)
    return dFirst.getTime()<dSecond.getTime();
    }

}

然后，您可以简单地将它用于 ng-show

        <div ng-show='compareDates(obj.date1,obj.date2)'>date1 has to be greater than date2</div>
        <div ng-show='compareDates(obj.date2,obj.date3)'>date3 has to be greater than date2</div>

这是用于日期之间的比较，如果您想在第二个日期之前/之后使第一个日期无效，您可以使用相同的函数并设置一个自定义 $error ，如下所示：

    $scope.invalidate=function(item){
    console.log("invalidate")
    $scope.myForm[item].$setValidity("notGoodEnough", false);   
}
$scope.validate=function(item){
    console.log("validate")
    $scope.myForm[item].$setValidity("notGoodEnough", true);   
}

您可以在想要验证或不验证字段时调用这些函数，在我的小提琴中，我向比较函数添加了第三个参数，以指定必须通过比较验证哪个字段，我让您检查：http:// jsfiddle.net/DotDotDot/zYF3U/3/

玩得开心

于 2013-08-16T08:26:12.297 回答
1

在进行比较的范围上定义一个函数。像这样的东西：

date1: <input type='text' name='date1' ng-model='obj.date1' 
required pattern='datePattern'/>
<div ng-show="compareDates(obj.date1, obj.date2)">
    date1 has to be greater than date2
</div>
date2: <input type='text' name='date2' ng-model='obj.date2' 
required pattern='datePattern'/>

JS：

function myController($scope){ 
    $scope.compareDates = function(d1,d2){          
        /* convert to date object assuming the input d1 = 2013-08-15 */         
        /* or some other valid format */
        d1 = new Date(d1);
        d2 = new Date(d2);          
        return d1 < d2;
    }
}

如果您的日期直接在控制器的范围内，那么您不需要将日期传递给函数。你可以简单地这样做：

<div ng-show="compareDates()">date1 has to be greater than date2</div>

JS：

function myController($scope){ 
    $scope.obj = {};

    $scope.compareDates = function(){
        /* convert to date objects assuming valid inputs */         
        return new Date($scope.obj.date1) < new Date($scope.obj.date2);
    }
}
于 2013-08-16T08:29:54.853 回答