quartz定时任务，Cron表达式前端验证以及展示最近几次执行时间。

1. 后台代码编写

    引入quartz的包
    <dependency>
  		<groupId>org.quartz-scheduler</groupId>
  		<artifactId>quartz</artifactId>
  		<version>${quartz.version}</version>
  	</dependency>
  	
   代码编写
      public  List<String> getRecentTriggerTime(String cron) {
  		List<String> list = new ArrayList<String>();
  		try {
  			CronTriggerImpl cronTriggerImpl = new CronTriggerImpl();
  			cronTriggerImpl.setCronExpression(cron);
  			// 6 代表获取6次
  			List<Date> dates = TriggerUtils.computeFireTimes(cronTriggerImpl, null, 6);
  			SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
  			for (Date date : dates) {
  				list.add(dateFormat.format(date));
  			}
  		} catch (Exception e) {
  			logger.error("cron表达式输入有误.......................");
  			list.add("cron表达式输入有误");
  		}
  		return list;
  	}

2. 前端代码编写

  <div id="dialogRule" style="display: none">
			<div class="clearfix">
				<div class="dialog-left">
					<div class="row1 " id="timeForm">
						<label>表达式字段</label>
						<div class="col-input" style="display: none;">
							<p>秒</p>
							<input type="text" id="second" value="0">
						</div>
						<div class="col-input">
							<p>分钟</p>
							<input type="text" id="minute"value="*">
						</div>
						<div class="col-input">
							<p>小时</p>
							<input type="text" id="hour"value="*">
						</div>
						<div class="col-input">
							<p>日</p>
							<input type="text" id="day"value="?">
						</div>
						<div class="col-input">
							<p>月</p>
							<input type="text" id="month"value="*">
						</div>
						<div class="col-input">
							<p>星期</p>
							<input type="text" id="week"value="*">
						</div>
					</div>
					<div class="row1">
						<label>Cron表达式</label>
						<div class="col-input-7">
							<input type="text" id="express" value="0 * * ? * *">
							<button onclick="CronExecute()" >验证</button>
						</div>
						
					</div>
					<div style="padding-left: 10px;">
						<label style= "width: 150px;margin-bottom:-10px;margin-left: -10px;">最近6次执行时间:</label>
						<div id="result"></div>
					</div>
				</div>
				<div class="dialog-right">
					<p><b style="font-size: 14px;color:red;">*</b>：表示匹配任意值</p>
					<p><b style="font-size: 14px;color:red;">?</b>：表示匹配任意值,只能在日和星期中使用</p>
					<p><b style="font-size: 14px;color:red;">-</b>：x-y表示x到y</p>
					<p><b style="font-size: 14px;color:red;">/</b>：x/y表示从x起，每隔y</p>
					<p><b style="font-size: 14px;color:red;">,</b>：x,y表示x和y</p>
				</div>
			</div>
				
			<div class="dialog-footer" style="text-align: center; margin-top: 10px" >
				<button class="btn btn-default" id="resetCron">重置</button>
				<button class="btn btn-success" id="subCron">保存</button>
			</div>
				
			
		<div>

            <script>
                $('#resetCron').click(function(){
				$("#second").val("0 ");
				$("#minute").val("*");
				$("#hour").val("*");
				$("#day").val("?");
				$("#month").val("*");
				$("#week").val("*");
				$("#express").val("0 * * ? * *");
				$("#result").html("");
			  })


	          $('#subCron').click(function(){
				$("#cron").val($("#express").val());
				$("#second").val("0 ");
				$("#minute").val("*");
				$("#hour").val("*");
				$("#day").val("?");
				$("#month").val("*");
				$("#week").val("*");
				$("#express").val("0 * * ? * *");
				$("#result").html("");
                layer.close(cronlayer)
			  })
	          $('#timeForm input').bind('input propertychange', function(){
		       var expressVal = $("#second").val()+" "+$("#minute").val()+" "+$("#hour").val()+" "+$("#day").val()+" "+$("#month").val()+" "+$("#week").val();
		       $("#express").val(expressVal)	
			   })  
			   
			   $('.col-input-7 input').bind('input propertychange', function(){
						var text= $("#express").val();
						text=text.replace(/[\s ]+/g, "-+")
						var arry=[7]
						arry= text.split("-+");	
	
						$("#minute").val(arry[1]);
						$("#hour").val(arry[2]);
						$("#day").val(arry[3]);
						$("#month").val(arry[4]);
						$("#week").val(arry[5]);
					
			   })  

			 function  CronExecute(){
				 if($("#express").val()==""||$("#express").val()==null){
					 layer.msg("表达式字段不能为空")
					 return;
				 }
				$.ajax({
                        url : '/dsp/report/getRecentTriggerTime.do',
                        dataType : 'json',
                        type : 'POST',
                        data : {cron: $("#express").val()},
                        success : function(res) {
							var rest="";
							if(res.length>0){
								for(var i=0;i<res.length;i++){
									if(res[i]=="cron表达式输入有误"){
										$("#result").html("<span style='color:red;'>cron表达式输入有误</span>")
										return
									}
									rest+=res[i]+"<br>"
								}	
							}else{
								rest="<sapn style='color:red;'>当前时间已超过执行时间</sapn>"
							}
						    $("#result").html(rest)
                        },
                        error: function(){
                           $("#result").html("<span style='color:red;'>服务器内部错误</span>")
                        }
                    });
			   }
			   var cronlayer;
             function cronEdit(){
				 cronlayer=layer.open({
							type: 1,
							title: 'Cron编写',
							shade: false, 
							offset: '60px',
							cancel: function (index, layero) {
								$("#second").val("0 ");
								$("#minute").val("*");
								$("#hour").val("*");
								$("#day").val("?");
								$("#month").val("*");
								$("#week").val("*");
								$("#express").val("0 * * ? * *");
								$("#result").html("");
							},
							area: ['740px', '400px'],
							content: $('#dialogRule')
						});
			   }  
	</script>

     <style>
		#dialogRule{
			width: 740px;
			font-size: 12px;

		}
		#dialogRule .row1{
			margin-top: 15px;
			height: 45px;
		}
		#dialogRule label{
			
			padding:10px;
			width: 90px;
		}
		.col-input{
			display: inline-block;
			text-align: center;
			width: 80px;
			margin-left: 5px;
		}
		.col-input input{
			width: 80px;
			height: 20px;
			line-height: 20px;

		}
		.col-input-7{
			display: inline-block;
			text-align: center;
			width: 442px;
			margin-left: 5px;
		}
		.col-input-7 input{
			width: 390px;
			height: 22px;
			line-height: 20px;
			margin-left: -9px;
		}
		.dialog-left{
			float: left;
			width: 550px;
		}
		.dialog-right{
			float: right;
			padding-right: 10px;
			padding-top: 10px;
			width: 190px;
			height: 307px;
			padding-left: 10px;
			background:#f6f7f5;
		}
		#result{
		padding-left: 10px;
		width: 522px;
		height: 160px;
		border: 1px solid #ddd;
	    border-radius: 4px;
	    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
		}
		</style>

3. 说明

本文用的是bootstrap样式，需要引用jquery.js，其他自定义样式需要自己去调试