应禁用 angularjs 提交表单中的开始日期结束日期验证
Posted
技术标签:
【中文标题】应禁用 angularjs 提交表单中的开始日期结束日期验证【英文标题】：Start date End date validation in angularjs submit form should be disabled 【发布时间】：2016-08-07 12:23:09 【问题描述】：如果开始日期-结束日期验证失败，我不想提交我的表单...如果我有这个，请在我的表单中...
<form name="scheduleForm" id="scheduleForm" class="form-vertical" novalidate>
<input type="text" placeholder="Start Date" ng-model="schedule.startDate" class="form-control" ui-date novalidate required>
<input type="text" name="endDate" placeholder="End Date" ng-model="schedule.endDate" class="form-control" ui-date novalidate ng-change='checkErr(schedule.startDate,schedule.endDate)' required>
<button class="btn btn-primary" ng-click="addSchedule(schedule)" ng-disabled="errMessage || scheduleForm.$invalid">Add Schedule</button>
在控制器中：
$scope.checkErr = function(startDate,endDate)
$scope.errMessage = '';
var curDate = new Date();
if(new Date(startDate) > new Date(endDate))
$scope.errMessage = 'End Date should be greater than start date';
// var err=function()
// $window.alert('End Date should be greater than start date');;
// err();
return false;
if(new Date(startDate) < curDate)
$scope.errMessage = 'Start date should not be before today.';
// var err=function()
// $window.alert('Start date should not be before today.');;
// err();
return false;
;
并在添加功能中：
$scope.addSchedule=function(schedule)
$scope.schedules.push(
startDate: schedule.startDate,
endDate: schedule.endDate,
);
schedule.startDate='';
schedule.endDate='';
;
可能是按钮看起来禁用 bt 它允许添加数据...请帮助提前感谢
【问题讨论】：
只是想知道...所有浏览器都会发生这种情况吗？我的意思是您看到它被禁用但可以单击按钮... 更新你的 ng-disable 像 as-ng-disabled="errMessage!='' || scheduleForm.$invalid" 也在'chkErr'消息之前初始化你的$scope.errMessage=''跨度> 【参考方案1】：要正确比较时间应该使用getTime()函数
if(new Date(startDate).getTime() > new Date(endDate).getTime())
并在按钮中检查日期验证，因此无需在结束日期更改时使用checkErr()
<button class="btn btn-primary" ng-click="addSchedule(schedule)" ng-disabled="checkErr(schedule.startDate,schedule.endDate)|| scheduleForm.$invalid">Add Schedule</button>
和你的checkErr 函数如下：
$scope.checkErr = function(startDate,endDate)
var curDate = new Date();
// can set error message if need to show
if(new Date(startDate).getTime() > new Date(endDate).getTime())
return true; // if invalid
if(new Date(startDate).getTime() < curDate.getTime())
return true; // if invalid
else
return false // if valid
;
【讨论】：
【参考方案2】：为什么不在元素准备好时添加验证。看这里的演示https://plnkr.co/edit/JunWzLjhLCPMqZnxsSYw?p=preview
var app = angular.module('myApp', ['ui.date']);
app.controller('MainCtrl', function($scope)
$scope.schedule = ;
$scope.dateOptions =
changeYear: true,
date:$scope.schedule.startDate,
changeMonth: true,
yearRange: '1900:-0',
maxDate: new Date(new Date().setDate(new Date().getDate() + 2)),
minDate:new Date()
;
$scope.addSchedule=function(schedule)
console.log($scope.schedule)
;
);<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="date.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="scheduleForm" id="scheduleForm" class="form-vertical" novalidate>
<input type="text" placeholder="Start Date" ng-model="schedule.startDate" ui-date-format="DD, d MM, yy"
class="form-control" min-date="minDate" max-date="maxDate" ui-date="dateOptions" novalidate required>
<!--<input type="text" name="endDate" placeholder="End Date" ui-date-format="DD, d MM, yy" ng-model="schedule.endDate" class="form-control" ui-date novalidate ng-change='checkErr(schedule.startDate,schedule.endDate)' required>
-->
<button class="btn btn-primary" ng-click="addSchedule(schedule)" ng-disabled="scheduleForm.$invalid">Add Schedule</button>
</form>
</body>
</html>【讨论】：
以上是关于应禁用 angularjs 提交表单中的开始日期结束日期验证的主要内容，如果未能解决你的问题，请参考以下文章
在 datepicker 中仅显示当前月份，其余所有月份应使用 angularjs 禁用