【发布时间】：2015-10-06 16:03:30
【问题描述】：
我有一个表格，用于检查信用卡到期日期是在当前日期之前还是之后。在大多数情况下，它有效。但是，如果您以特定方式浏览表单，验证将无法正常工作。
基本上，如果您使用鼠标单击字段，则一切正常。如果您使用箭头键切换值，则不会。
这可以在下面的代码和我做的代码笔中看到here。
如果您从文本框开始，使用 Tab 键转到 Exp Month 并向下箭头到 1 或 2，然后通过 Tab 键转到 Exp Year。在这里，向下箭头到 2015 年，您会看到说明日期必须在今天之后的文字。 （这是在 2015 年 10 月写的，所以测试会根据你看这篇文章的时间而改变）。这里的文字是预期的。出乎意料的是，如果您在同一个框中向下箭头到 2016 年，则文本不清晰。本质上，ng-show 并没有重新测试代码，即使模型中发生了一些变化。如果您向下箭头到 2017，则文本隐藏并且一切正常。更奇怪的是，您现在可以随心所欲地上下箭头，并且评估按预期工作。
var app = angular.module('App', []);
app.controller('ccDate', function($scope) {
$scope.ccExpireMonths = [{
id: 1,
name: "1"
}, {
id: 2,
name: "2"
}, {
id: 3,
name: "3"
}, {
id: 4,
name: "4"
}, {
id: 5,
name: "5"
}, {
id: 6,
name: "6"
}, {
id: 7,
name: "7"
}, {
id: 8,
name: "8"
}, {
id: 9,
name: "9"
}, {
id: 10,
name: "10"
}, {
id: 11,
name: "11"
}, {
id: 12,
name: "12"
}]
$scope.expireMonth = "";
var currentDate = new Date();
$scope.currentYear = currentDate.getFullYear();
function getCreditCardExpireYears() {
var expireYears = new Array();
var i;
for (i = 0; i < 8; i++) {
expireYears[i] = $scope.currentYear + i;
};
return expireYears;
}
$scope.ccExpireYears = getCreditCardExpireYears();
$scope.validateCCExpireDate = function() {
var today = new Date();
var minDate = new Date(today.getFullYear(), today.getMonth());
var ccExpireDate = new Date($scope.expireYear, $scope.expireMonth - 1);
return ccExpireDate < minDate;
};
});<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="App">
<div ng-controller="ccDate">
<div class="row">
<div class="form-group col-md-12">
<label for="some=text">Some Text</label>
<input type="text" id="some-text">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<label for="expire-month" required="">Exp. Month</label>
<select id="expire-month" class="form-control ng-valid ng-valid-required ng-dirty ng-valid-parse ng-touched" title="Select the card expiration month" ng-model="expireMonth" ng-options="month.id as month.name for month in ccExpireMonths" ng-required="expireMonth"
required="required">
</select>
</div>
<div class="form-group col-md-2">
<label for="expire-year" required="">Exp. Year</label>
<select id="expire-year" class="form-control ng-valid ng-valid-required ng-dirty ng-valid-parse ng-touched" title="Select the card expiration year" ng-model="expireYear" ng-options="year for year in ccExpireYears" ng-required="expireYear" required="required">
</select>
</div>
<div class="form-group col-md-3">
</div>
</div>
<div class="row">
<div id="expire-month-value" ng-show="validateCCExpireDate() && expireMonth && expireYear" class="error-text form-group col-md-3 ng-hide">Month/Year combination must not be in the past.</div>
</div>
</div>
</body>【问题讨论】：
标签： javascript jquery angularjs validation