Angular.Js输入[date]验证
这是我的表格：
<form name="user_submission" novalidate="novalidate" method="post">
<input type="date" name="date_of_birth" ng-focus="save_data()" ng-model-options="{timezone: 'UTC'}" ng-pattern="/^(19\d{2}|[2-9]\d{3})-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/" ng-model="step_content.date_of_birth" required ng-maxlength="10" ng-minlength="10" >
<br>
<span class="error" ng-show="user_submission.date_of_birth.$error.pattern">Wrong format!</span>
<span class="error" ng-show="user_submission.date_of_birth.$error.date">Wrong Date!</span>
<span class="error" ng-show="user_submission.date_of_birth.$error.minlength">Wrong Date!</span>
<span class="error" ng-show="user_submission.date_of_birth.$error.maxlength">Wrong Date!</span>
</form>
以下是我从上面提到的内容:(完美）
我需要把年份限制在“yyyy＆＃39;但无论我做什么，我仍然可以键入超过4位数。
我尝试了一个指令：
// Usage: <input limit-to="4" type="number" >
app.directive("limitTo", [function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
var limit = parseInt(attrs.limitTo);
angular.element(elem).on("keydown", function() {
if (this.value.length == limit) return false;
});
}
}
}]);
然而，当我将limitTo添加到日期字段时，我根本无法进入整年，我认为Angular会覆盖“yyyy”。通过从右边添加一个数字，然后删除一个＆＃39; y＆＃39;从左边开始limitTo=10根本不起作用。
我不能选择。
非常感谢任何帮助或指示。
提前致谢。
1 个答案:
答案 0 :(得分：0)
我放弃并写了我自己的指令，如果有人遇到同样的问题，我不会删除这个问题。
这是我制定的一个指令，有点渗透，但它完成了工作。在Chrome，Safari和Firefox中测试过。
以下是Plunker地址：https://plnkr.co/edit/XwNR618DM8IULxu9KLMe
（我无法在模板中整理plunker的地址，所以我嵌入了Plunker，因为嵌入模板focus指令不起作用。如果使用以下代码实现此功能，光标应在完成后从一个文本字段移动到另一个文本字段。）
app.directive('multiSelectDate', function () {
return {
restrict: 'EA',
scope: {
datasource: '='
},
controller: function ($scope) {
$scope.date = {
day: [],
month: [],
year: []
};
if (typeof $scope.datasource != 'undefined' && $scope.datasource != '') {
var sources = $scope.datasource.split('/');
if (typeof sources == 'object') {
$scope.date = {
day: [sources[0][0], sources[0][1]],
month: [sources[1][0], sources[1][1]],
year: [sources[2][0], sources[2][1], sources[2][2], sources[2][3]],
};
}
}
$scope.only_one_allowed = function(array) {
var val = [];
angular.forEach(array, function(value, index){
if (typeof value != 'undefined') {
if (value.length > 1) {
val[index] = value.split('')[1];
} else {
val[index] = value
}
}
});
return val;
};
$scope.only_number_allowed = function(array, type) {
if (type == 'year') {
var year_1st_digit = /1|2/;
var year_2nd_digit = /0|9/;
var year_rest_digit = /[0-9]/;
if (!year_1st_digit.test(array[0])) {
array[0] = '';
}
// Should be 0 or 9
if (!year_2nd_digit.test(array[1])) {
array[1] = '';
}
if (!year_rest_digit.test(array[2])) {
array[2] = '';
}
if (!year_rest_digit.test(array[3])) {
array[3] = '';
}
} else if (type == 'month') {
var month_1st_digit = /[0-1]/;
var month_2nd_digit = /[0-9]/;
// Shouldn't be more than 1 or less than 0
if (!month_1st_digit.test(array[0])) {
array[0] = '';
}
// Shouldn't be more than 2 or less than 0
if (!month_2nd_digit.test(array[1])) {
array[1] = '';
}
// if the month[0] is undefined and second digit has value change the first digit to 0
if (( typeof array[0] == 'undefined' || array[0] == '' ) && parseInt(array[1]) >= 0) {
array[0] = 0;
}
// date.array must have only one digit
if (parseInt(array[0], 10) != array[0]) {
array[0] = '';
}
if (parseInt(array[1], 10) != array[1]) {
array[1] = '';
}
if (parseInt(array[0], 10) == array[0] && parseInt(array[1], 10) != array[1]) {
array[1] = 0;
}
} else {
var day_1st_digit = /[0-3]/;
var day_2nd_digit = /[0-9]/;
// Shouldn't be more than 1 or less than 0
if (!day_1st_digit.test(array[0])) {
array[0] = '';
}
// Shouldn't be more than 2 or less than 0
if (!day_2nd_digit.test(array[1])) {
array[1] = '';
}
// if the day[0] is 3 then second digits must be less than 1
if (parseInt(array[0]) == 3 && parseInt(array[1]) > 1) {
array[1] = 1;
}
// if the day[0] is undefined and second digit has value change the first digit to 0
if (( typeof array[0] == 'undefined' || array[0] == '' ) && parseInt(array[1]) >= 0) {
array[0] = 0;
}
// date.array must have only one digit
if (parseInt(array[0], 10) != array[0]) {
array[0] = '';
}
if (parseInt(array[1], 10) != array[1]) {
array[1] = '';
}
if (parseInt(array[0], 10) == array[0] && parseInt(array[1], 10) != array[1]) {
array[1] = 0;
}
}
return array;
};
$scope.update_date = function () {
var day = '';
var month = '';
var year = '';
if (typeof $scope.date.day != 'undefined') {
var dirty_day = $scope.only_one_allowed($scope.date.day);
dirty_day = $scope.only_number_allowed(dirty_day, 'day' );
$scope.date.day = dirty_day;
day = dirty_day.join('');
}
if (typeof $scope.date.month != 'undefined') {
var dirty_month = $scope.only_one_allowed($scope.date.month);
dirty_month = $scope.only_number_allowed(dirty_month, 'month' );
$scope.date.month = dirty_month;
month = dirty_month.join('');
}
if (typeof $scope.date.year != 'undefined') {
var dirty_year = $scope.only_one_allowed($scope.date.year);
dirty_year = $scope.only_number_allowed(dirty_year, 'year' );
$scope.date.year = dirty_year;
year = dirty_year.join('');
}
$scope.datasource = day + '/' + month + '/' + year
}
},
templateUrl: '/multiSelectDate.html',
link: function (scope, element, attrs) {
var start_year = attrs.startYear;
if (scope.date.year.length != 4 && typeof start_year != 'undefined') {
scope.date.year = [start_year[0], start_year[1], start_year[2], start_year[3]];
}
scope.$watch('datasource', function(){
var sources = scope.datasource.split('/');
if (typeof sources == 'object') {
if (sources.length == 3) {
scope.date = {
day: [sources[0][0], sources[0][1]],
month: [sources[1][0], sources[1][1]],
year: [sources[2][0], sources[2][1], sources[2][2], sources[2][3]]
};
}
}
})
}
}
});
以下是模板：（/multiSelectDate.html）
<div class="form-inline">
<input type="text" focus ng-model="date.day[0]" class="dl_float" size="1" ng-keyup="update_date()">
<input type="text" focus ng-model="date.day[1]" class="dl_float" size="1" ng-keyup="update_date()"> /
<input type="text" focus ng-model="date.month[0]" class="dl_float" size="1" ng-keyup="update_date()">
<input type="text" focus ng-model="date.month[1]" class="dl_float" size="1" ng-keyup="update_date()"> /
<input type="text" focus ng-model="date.year[0]" class="dl_float" size="1" ng-keyup="update_date()">
<input type="text" focus ng-model="date.year[1]" class="dl_float" size="1" ng-keyup="update_date()">
<input type="text" focus ng-model="date.year[2]" class="dl_float" size="1" ng-keyup="update_date()">
<input type="text" focus ng-model="date.year[3]" class="dl_float" size="1" ng-keyup="update_date()">
</div>
以下是重点：
// <input focus type="text" />
app.directive('focus', function () {
return {
restrict: 'A',
link: function ($scope, elem, attrs) {
elem.bind('keyup', function (e) {
if (e.keyCode == 8) {
if (typeof elem.prev() != 'undefined' && elem.prev().size() > 0) {
elem.prev()[0].focus();
elem.prev()[0].value = '';
}
} else {
if (typeof elem.next() != 'undefined' && elem.next().size() > 0) {
var val = elem[0].value;
if (!isNaN(parseFloat(val)) && isFinite(val)) {
elem.next()[0].focus();
}
}
}
});
}
}
});
以下是CSS示例：
.dl_float {
font-size: 14px !important;
width: 19px;
}
以下是如何使用它：
<multi-select-date datasource="date_of_birth" start-year="1945" ></multi-select-date>
在这里你可以看到结果
{{date_of_birth}}
如果您需要在控制器中启动它，请执行以下操作：
$scope.date_of_birth = '11/01/1950';
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？