手机验证码DEMO

jsp代码：

<form class="am-form am-g am-g-collapse">
     <div class="am-form-group am-u-sm-8 am-margin-bottom-0">
	<input id="phone" type="text" class="am-form-field" placeholder="请输入绑定手机号"></div>
	<input type="button" class="am-btn am-btn-warning am-u-sm-4" value="获取验证码" οnclick="fCode();"/>
	<div class="am-form-group am-u-sm-8 am-margin-bottom-0">
		<input id="code" type="text" class="am-form-field" placeholder="请输入验证码">
	</div>
       <input type="button" class="am-btn am-btn-success am-u-sm-4" value="绑定" οnclick="bind_wx()"/>
</form>

js代码：

（1）获取验证码

function fCode() {
	var customMobile = $("#phone").val();
	if (!checkPhone(customMobile)) {
		return;
	}

	$.ajax({
		url : getCodeUrl,
		type : "post",
		data : {
			customMobile : customMobile,
		},
		success : function(returnData) {
			fCode = returnData;
			alert("发送验证码成功");
		},
		error : function() {
			alert("获取验证码异常，请稍后重试");
		}
	});
}

（2）校验难证码

function bind_wx() {
	var openid = $("span:hidden").text();
	var phone = $("#phone").val();
	var code = $("#code").val();
	if (phone == "" || phone == null) {
		alert("请填写手机号后再进行操作");
		return;
	}
	if (code != fCode) {
		alert("验证码输入不正确，请重新输入！");
		return;
	}

java代码：

public void doCode(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		String customMobile = request.getParameter("customMobile");
		
		Random r = new Random();
		int code = r.nextInt(9000)+1000;
		
		Map<String, String> map = new HashMap<String, String>();
		map.put("DstAddresses", customMobile);
		map.put("MsgContent", "您的手机验证码是"+ code +",山东省教育云服务平台.");
		MessageUtil.send(map,"UTF-8");
		super.writeAsJson(response, code);
	}

其中需要引入

MessageUtil

包及一些JAR包