Javascript 使用ng change、AngularJS进行日期输入验证
我在我的页面中使用AngularJS和。我有一个日期选择器指令,如下所示:Javascript 使用ng change、AngularJS进行日期输入验证,javascript,angularjs,datepicker,angular-ui-bootstrap,angularjs-ng-change,Javascript,Angularjs,Datepicker,Angular Ui Bootstrap,Angularjs Ng Change,我在我的页面中使用AngularJS和。我有一个日期选择器指令,如下所示: <div class="form-group {{dateStatus.class}}"> <p class="input-group"> <input type="text" id="inpDate" class="form-control" datepicker-popup="dd-MMMM-yyyy
<div class="form-group {{dateStatus.class}}">
<p class="input-group">
<input type="text" id="inpDate" class="form-control"
datepicker-popup="dd-MMMM-yyyy" ng-model="task.date"
is-open="datePickerStatus.isOpen" min-date="minDate"
datepicker-options="dateOptions" ng-required="true"
close-text="Close" placeholder="Due date"
ng-change="checkDateValidity()"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="openDatePicker($event)"
>
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
document.getElementById('inpDate').value
检查插入的日期是否有效,一切正常,但问题是当日期输入留空(或从有效状态更改为空)时
我也希望它是可以接受的,但是由于空输入和无效日期都是未定义的,我不知道如何在这两种情况之间声明
我还想过直接阅读输入文本,如下所示:
<div class="form-group {{dateStatus.class}}">
<p class="input-group">
<input type="text" id="inpDate" class="form-control"
datepicker-popup="dd-MMMM-yyyy" ng-model="task.date"
is-open="datePickerStatus.isOpen" min-date="minDate"
datepicker-options="dateOptions" ng-required="true"
close-text="Close" placeholder="Due date"
ng-change="checkDateValidity()"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="openDatePicker($event)"
>
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
document.getElementById('inpDate').value
但是当值被更改时,ng更改被触发,而我只剩下以前的值,现在它是无用的
感谢您的时间和回复。如果您想这样验证,那么您可以使用
if(document.getElementById('inpDate').value === "" ){
$scope.addButtonState.isOk = true;
$scope.dateStatus.class = '';
}
这是在
$scope.checkDateValidity
函数的开头,通过将验证器回调绑定到change
和keyup
事件,您可以轻松地验证#inpDate
值,然后在触发回调时可以检查输入的有效性
$timeout(function(){
angular
.element(document.getElementById('inpDate'))
.bind('keyup change', function(){
var inputValue,
customDate,
isValid;
inputValue = this.value;
if(inputValue != ''){
customDate = new Date(inputValue);
isValid = !isNaN(customDate);
if(isValid){
console.log('Valid');
// do something
}
else{
console.log('Invalid');
// do something else
}
}
else{
console.log('Empty');
// do something else
}
});
}, 400);
请确保您的控制器中已注入
$timeout
。更好的验证方法是使用指令添加验证规则
.directive("validateDate", function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.validateDate = function(modelValue, viewValue) {
if(!isNaN(modelValue) || ctrl.$isEmpty(modelValue)){
return true;
}
return false;
};
}
};
})
然后,您只需将
验证日期
添加到输入标记,如果输入有效,验证将标记为有效!isNaN(当日期是一个数字或为空时)OP已经提到,他尝试了这个方法,但它不起作用。否则请验证$scope.task.date
像这样,我不明白这里什么不起作用不建议直接从controller@Kunal对但我刚刚解决了一个具体问题。问题的作者可以构建一个指令并在其中使用此方法。但是无论结果如何,ng更改仍然会触发。我们是否应该将所有更改事件逻辑移到validation指令?