jsp+servlet 实现发送短信验证码，并开始倒计时

最新推荐文章于 2023-07-18 13:50:40 发布

原创最新推荐文章于 2023-07-18 13:50:40 发布 · 4.4k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#jsp #java #手机验证码

该博客介绍了使用JSP+Servlet实现手机验证码功能的流程。客户端通过HTTP请求将手机号等信息传至服务器，服务器校验参数后调用第三方短信接口，将验证码存于session缓存。客户端根据返回结果处理，成功则倒计时等输入，失败则提示信息。还提及短信接口用互亿在线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大致流程如下：
1、客户端js通过发送http请求（发短信接口）到服务器，将手机号等信息传递给服务器
2、服务器收到请求后校验参数，参数正确调用第三方短信接口，并将随机产生的验证码保存在服务器（session缓存）。
3、客户端收到服务器的返回，如果调用成功，开始倒计时同时等待用户输入收到的验证码，如果调用失败，将失败信息提示给用户。

本示例采用jsp+servlet，注意要在web.xml中配置
短信接口采用互亿在线网址就自行百度

手机验证码其实各个短信验证平台都给出了端口代码，所以在项目中使用的时候并没有出什么BUG。

JSP页面代码

<script type="text/javascript">
	
	function get_mobile_code() {
		$.post('phonecode', {
			mobile : jQuery.trim($('#mobile').val())
		}, function(msg) {

			RemainTime();

		});
	};
	var iTime = 59;
	var Account;
	function RemainTime() {
		document.getElementById('zphone').disabled = true;
		var iSecond, sSecond = "", sTime = "";
		if (iTime >= 0) {
			iSecond = parseInt(iTime % 60);
			iMinute = parseInt(iTime / 60)
			if (iSecond >= 0) {
				if (iMinute > 0) {
					sSecond = iMinute + "分" + iSecond + "秒";
				} else {
					sSecond = iSecond + "秒";
				}
			}
			sTime = sSecond;
			if (iTime == 0) {
				clearTimeout(Account);
				sTime = '获取手机验证码';
				iTime = 59;
				document.getElementById('zphone').disabled = false;
			} else {
				Account = setTimeout("RemainTime()", 1000);
				iTime = iTime - 1;
			}
		} else {
			sTime = '没有倒计时';
		}
		document.getElementById('zphone').value = sTime;
	}
</script>


<body>
	<div id="reg">
		<form action="customer" method="post">
			<ul>
				<li class="m">用户帐号</li>
				<li class="r"><input name="account" type="text" /></li>

				<li class="m">手机号码</li>
				<li class="r"><input id="mobile" name="mobile" type="text" /></li>

				<li class="m">验证码</li>
				<li class="r"><input type="text" name="mobile_code" /> <input
					id="zphone" type="button" value=" 获取手机验证码 "
					onClick="get_mobile_code()">
				<li class="r"><input name="button" type="image" id="button"
					value="提交" /></li>

			</ul>
		</form>
	</div>
</body>

Servlet代码
可以自行百度注册后取得密钥即可使用

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		HttpSession session =request.getSession();
		String postUrl = "http://106.ihuyi.cn/webservice/sms.php?method=Submit";
		int mobile_code = (int)((Math.random()*9+1)*100000); //获取随机数
		String account = "*****"; //查看用户名是登录用户中心->验证码短信->产品总览->APIID
		String password = "*****";  //查看密码请登录用户中心->验证码短信->产品总览->APIKEY
		String mobile = request.getParameter("mobile");
		String content = new String("您的验证码是：" + mobile_code + "。请不要把验证码泄露给其他人。");
		session.setAttribute("mobile_code", mobile_code);
		try {

			URL url = new URL(postUrl);
			HttpURLConnection connection = (HttpURLConnection) url.openConnection();
			connection.setDoOutput(true);//允许连接提交信息
			connection.setRequestMethod("POST");//网页提交方式“GET”、“POST”
			connection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
			connection.setRequestProperty("Connection", "Keep-Alive");
			StringBuffer sb = new StringBuffer();
			sb.append("account="+account);
			sb.append("&password="+password);
			sb.append("&mobile="+mobile);
			sb.append("&content="+content);
			java.io.OutputStream os =  connection.getOutputStream();
			os.write(sb.toString().getBytes());
			os.close();

			String line, result = "";
			BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream(), "utf-8"));
			while ((line = in.readLine()) != null) {
				result += line + "\n";
			}
			in.close();
			System.out.println(result);

		} catch (IOException e) {
			e.printStackTrace(System.out);
		}
	}