手机短信验证码，向前向后推30天，停3秒后跳转页面 java

大家好：

今天做的一个功能是短信验证！感觉也不是很简单，大家共勉一下！其中有发送验证码，接收验证码，手机验证码判别，中间还有一个是页面等待三秒后跳转！

Controller（包含卡解绑跟卡挂失，两个页面功能相似）

package com.xx.xx.controller;

import java.util.Calendar;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;


@Controller
@RequestMapping("/bjMedicalCard/cardManager")
public class CardManagerController {
	@Autowired
	private CardManageInf cardManageInf; //卡管理
	@Autowired
	private UserInfoInf userInfoInf;    //用户信息
	@Autowired
	private HttpSession httpSession;
	
	private static Logger logger = Logger.getLogger(CardManagerController.class); //打印log日志
	
	/**
	* @Title: getUserPhone 
	* @Description: (根据卡号查询用户的电话)
	* @author zhangx
	* @param @param cardno
	* @return String 
	 */
	@RequestMapping("/getUserPhone")
	public String getUserPhone(
			HttpServletRequest request,
			@RequestParam(value = "cardno", required = true) String cardno   	//卡号
		   ,@RequestParam(value = "type", required = true) int type    		    // 路径 为 0： 卡挂失；1：卡解绑
			){
		try {
			UserInfo userInfo = userInfoInf.selectUserInfoByCardNo(cardno);		//根据卡号，查询用户信息
			request.setAttribute("phone", userInfo.getPhone());
			request.setAttribute("cardno", cardno);
		} catch (Exception e) {
			e.printStackTrace();
			logger.error("根据根据京医通卡查询用户的电话出现异常,京医通卡号不能为空");
		}
		if(type == 0){ 								 //卡挂失
			return "/mobile/card/cardLossReport";  	 //返回数据，返回指定页面		
		}else{										 //卡解绑
			return "/mobile/card/cardUnbundling";  	 //返回数据，返回指定页面		
		}
						
	}
	
	/**
	 * 
	* @Title: sendNumber 
	* @Description: (发送验证码) 
	* @author zhangx
	* @param @param phone
	* @param @return
	* @param @throws Exception 
	* @return Object 
	* @throws
	 */
	@RequestMapping(value = "/sendNumber", method = RequestMethod.POST)
	@ResponseBody
	public Object sendNumber(
		@RequestParam(value = "phone", required = false) String phone)
		throws Exception {
		
		Map<String, Object> map = new HashMap<String, Object>();
			Calendar c = Calendar.getInstance();
			
			String number = createNonceStr(c.getTimeInMillis() + "", 4); 	// 取得4位作为验证码
			SendMessage.send("验证码:"+number, phone, "");
			
			// 将发送的验证码和手机号放入session中，为以后比较使用
			httpSession.setAttribute("sessionNumber", number);
			logger.debug("发送的验证码：" + number);
			
			httpSession.setAttribute("sessionPhone", phone);
			logger.debug("发送的手机号：" + phone);
		return map;
	}

	/**
	 * 根据初始字符，生成指定长度的随机字符串
	 * @param length
	 * @return
	 */
	private static String createNonceStr(String nonce, int length) {
		String res = "";
		StringBuilder chars = new StringBuilder(nonce);
		Random rd = new Random();
		for (int i = 0; i < length; i++) {
			int index = rd.nextInt(chars.length() - 1);
			res += chars.charAt(index);
			chars.deleteCharAt(index);
		}
		return res;
	}
	/**
	 * 
	* @Title: validateFormNumber 
	* @Description: （验证手机验证码）
	* @author zhangx
	* @param @param validateNumber
	* @param @param phone
	* @param @param model
	* @param @return 
	* @return Object 
	* @throws
	 */
	@RequestMapping(value = "/validateFormNumber", method = RequestMethod.POST)
	@ResponseBody
	public Object validateFormNumber(
		@RequestParam(value = "validateNumber", required = true) String validateNumber, //验证码
		@RequestParam(value = "phone", required = true) String phone,      //手机号
		ModelMap model) {
		Map<String, Object> map = new HashMap<String, Object>();
			// 取得session中的验证码
			String sessionNumber = httpSession.getAttribute("sessionNumber")
					.toString();
			// 取得session中的手机号码
			String sessionPhone = httpSession.getAttribute(
					"sessionPhone").toString();

			logger.debug("前台输入的验证码：" + validateNumber);
			logger.debug("正确验证码：" + sessionNumber);
			logger.debug("前台输入的手机号码：" + phone);
			logger.debug("正确手机号码：" + sessionPhone);

			if (phone.trim().equals(sessionPhone)
					&& (validateNumber.trim().equals(sessionNumber))) {
				map.put("result", "0");
			} else if (!(phone.trim().equals(sessionPhone))) {
				map.put("result", "1");
			} else {
				map.put("result", "2");
			}
		
		return map;
	}
	/**
	 * 
	* @Title: modifiedCardStatus 
	* @Description: (卡管理—卡解绑)
	* @author zhangx
	* @param @param userid   //用户ID
	* @param @param cardno //卡号
	* @param @return identification //标识 1： 修改成功
	* @param @throws Exception 
	* @return Object 
	* @throws
	 */
	@RequestMapping("/modifiedCardStatus")
	@ResponseBody
	public String modifiedCardStatus(
		@RequestParam(value = "userid", required = false) String userid, 	//用户ID
		@RequestParam(value = "cardno", required = true) String cardno 		//卡号
		) {

		Map<String, Object> modelMap = new HashMap<String, Object>();
		String  identification = null;

		Integer cardstatus = 0;  	//绑卡信息   状态:0停用，1启用 （卡解绑）
		Integer cardtype = 2; 		//卡信息卡类型：2解绑
		modelMap.put("cardstatus",cardstatus);
		modelMap.put("cardtype",cardtype);
		modelMap.put("userid",userid);
		modelMap.put("cardno",cardno);

		try {
			int stamp = cardManageInf.updateUnbundlingCard(modelMap);		//根据根据卡号，修改卡状态
			if(stamp>0){
				identification = "1"; 	//修改成功
			}
		} catch (Exception e) {
			e.printStackTrace();
		} 

		return identification;
	}
	
	/**
	 * 
	* @Title: cardLossReport 
	* @Description: 卡挂失 
	* @author zhangx
	* @param @param userid
	* @param @param cardno
	* @param @return 
	* @return String 
	* @throws
	 */
	@RequestMapping("/cardLossReport")
	@ResponseBody
	public String cardLossReport(
		@RequestParam(value = "userid", required = false) String userid, 		//用户ID
		@RequestParam(value = "cardno", required = true) String cardno 			//卡号
		){
		CardInfo cardInfo = new CardInfo();
		String identification = null ;
			try {
				UserInfo userInfo = userInfoInf.selectUserInfoByCardNo(cardno); //根据卡号查询用户信息
				cardInfo.setCardno(cardno);					 					//cardno	卡号
				cardInfo.setCardno(userInfo.getIdtype());						//idtype	证件类型
				cardInfo.setCardno(userInfo.getIdno());							//idno	证件号码
				String inputType = "3";
				identification = cardManageInf.loseCard(cardInfo, inputType);
				if(identification!=null&&identification!=""){
					identification = "1"; 	//临时挂失成功
				}else{
					identification = "0";	//临时挂失失败
				}
			} catch (Exception e) {
				e.printStackTrace();
				logger.error("接口调用异常！");
			}
		return identification;
	}
}

jsp 页面（估计一些个路径会有差异，还得自行调整！）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/view/common/tags.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <link rel="stylesheet" href="<%=request.getContextPath()%>/css/base.css" type="text/css"/>  
<title>卡解绑</title>
</head>
<body>
<input type="hidden" id ="cardno" name = "cardno" value="${cardno}">
<input type="hidden" id ="phone" name = "phone" value="${phone}">

 <div class="container">
   <div class="loss_report">
   	<dl class="report_dl">
		<dt>卡号：</dt>
		<dd>${cardno}</dd>
		<dt>手机号码：</dt>
		<dd>${phone}</dd>
		<dt>验 证 码 ：</dt>
		<dd>
		<input id="validateNumber" name="validateNumber" maxlength="4"
			type="text" class="verify_code" /> <input name="ShowTime"
			id="ShowTime" type="button" value="获取验证码" οnclick="time(this)"
			class="btn_verify_code" />
		</dd>
	</dl>
   </div>
	<span class="loss_btn"><a href="javascript:;" class="btn btn_submit" id="agreesubmit" name="agreesubmit"
		οnclick="userInfo()">解绑</a></span>
	<p class="binding_success" style="display:none;">解绑成功！</p>	
	<a href="javascript:;" >解绑原则说明</a>
</div>

<div class="pop_wrap" style="display:none;">
    <div class="bg_mask"></div>
    <div class="pop_content">
        <b class="pop_b01">确认解绑</b>
        <p>解绑后，您在  
        <span id = "datevalue" name = "datevalue" readonly="readonly"></span>         <!--  <input id = "datevalue" name = "datevalue" disabled="disabled"> -->
        以后才可绑定用其他证件办理的卡！</p>
        <span class="btn_two"><a class="btn_pop btn_win50" href="javascript:;">取消</a><a class="btn_pop btn_win49" href="javascript:;">解绑</a></span>
    </div>
</div>

</body>


<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var _path = "<%=request.getContextPath()%>";
//页面加载事件
window.οnlοad=function() //用window的onload事件，窗体加载完毕的时候
{
	 var newDate = new Date();
	  newDate.setDate(newDate.getDate() +(30-0)); // 不包含当天在内的30天
	  var date = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate();
	  $("#datevalue").text(date);
}

//手机验证码
var cTime = 59;
function validateMobile() {
	var phone = $("input[name='phone']").val(); 
	if (cTime == 59)
		$.post(_path + "/bjMedicalCard/cardManager/sendNumber",
			{
				phone : phone
			},
			function(data) {
				
			});
}
//点击获取验证码 
function time(o) {
	var phone = $("input[name='phone']").val();
	var doc_height = $(document).height();
	$('.bg_mask').height(doc_height);
	
	if (phone == null || $.trim(phone) == "") {
		$('.pop_wrap').show();
		document.getElementById('errorMessage').innerHTML = '请您输入手机号';
		return false;
	}
	if (!(/^0?(13[0-9]|15[012356789]|18[012356789]|14[57])[0-9]{8}$/
			.test(phone))) {
		$('.pop_wrap').show();
		document.getElementById('errorMessage').innerHTML = '手机号码不正确';
		return false;
	}
	if (cTime == 59) {
		validateMobile();  //手机验证码 
		o.value = "获取验证码";
		cTime = 59;
		document.getElementById("phone").disabled=true;
	}
	if (cTime == 0) {
		o.removeAttribute("disabled");
		o.value = "获取验证码";
		cTime = 59;
		document.getElementById("phone").disabled=false;
	} else {
		o.setAttribute("disabled", true);
		o.value = "" + cTime + "秒";
		cTime--;
		setTimeout(function() {
			time(o)
		}, 1000)
	}
}
/**
 * 倒计时
 * @returns 
 */
function countDown() {
	window.setTimeout('countDown()', 1000);
	if (cTime >= 0)
		$("#ShowTime").val(cTime + "秒");
	cTime--;
	if (cTime < 0) {
		$("#ShowTime").val("获取验证码");
		$('#ShowTime').click(function() {
			//这里添加onclick后的事件，比如：
			$("#ShowTime").unbind("click");
			cTime = 59;
		});
		return false;
	}
}

//停3秒，跳转页面
 var i = 4 ;  
function showTime(){                                
   i-=1 ;  
   if(i   ==   1)  
   { 
	var url = _path + "/bjMedicalCard/myBjMedicalCard/selectCardInfoList";
	window.location.href = url;
   }  
   window.setTimeout("showTime()",100);       
}          
//提交信息
function userInfo(){
var cardno = $("input[name='cardno']").val();
var phone = $("input[name='phone']").val();
var validateNumber = $("input[name='validateNumber']").val();
var fluge = true;	
	if (!(/^0?(13[0-9]|15[012356789]|18[012356789]|14[57])[0-9]{8}$/
			.test(phone))) {
		alert("手机号码不正确");
		fluge = false ;
	return false;
	}
	if (validateNumber === null || validateNumber == "") {
		alert("验证码不能为空");
		fluge = false ;
	return false;
	}
	if(fluge == true){
//先判断手机号跟验证码是否正确，再判断是否确认解绑
$.post(_path + "/bjMedicalCard/cardManager/validateFormNumber", {
			validateNumber : validateNumber,
			phone : phone
		}, function(data) {
			if (data.result == "1") {
				alert("手机号码变更，请重新获取验证码");
				return false;
			}
			if (data.result == "2") {
				alert("验证码不正确");
				return false;
			}
			if (data.result == "0") { 		//手机号码正确，验证码正确 
				//弹出确认解绑框
				 $(".pop_wrap").show();
				 $(".btn_win50").click( 	//点击取消，隐藏遮罩层
			     	function(){$(".pop_wrap").hide();}
			     );
				 $(".btn_win49").click(  	//点击解绑，隐藏遮罩层并post请求 卡解绑 
				     function(){ 
					 	$(".pop_wrap").hide();
				 	 $.post(_path + "/bjMedicalCard/cardManager/modifiedCardStatus", {  //卡 解绑
						 cardno : cardno 
						}, function(data) {
							if (data == "1") {
								$(".binding_success").show();//解除绑定成功！
								//此处必须跳转页面 
								showTime();
							} else {
								alert("解除绑定失败");
							};
						});
				     }
				    
				 );
				
			}
		});
		
	}
}
</script>
</html>

希望对大家有帮助！ 遮罩层的就不显示了，这个添加的样式……