手机验证码执行流程
验证码流程
1、单击“获取短信验证”按钮，将会对手机号进行非“空”判断。
a) 如果为空，给出提示：请输入手机号。
b) 如果不为空，判断手机号是否符合规则，不符合给出“手机号不符合规则”提示
c) 当手机号不为空并且符合规则，就进行第二步
2、弹出验证码输入框。
a) 页面随机生成4位验证码（包括数字与字母）并且将手机号存放在cookie里面
b) 用户输入验证码，并且单击“确定”按钮，将会对验证码进行非“空”与匹配判断
c) 如果验证码为空或不匹配，则按钮不对其反应。
d) 如果不为空且验证码匹配，则向后台发送请求（带有手机号参数），请求“发送短 信”
e) 用户收到短信验证码。并且输入验证码，点击完成注册。后台将会对手机号，验证 码进行判断。当验证码与手机号不匹配，会给出提示。当两个匹配时，将注册成功。
jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type="text/javascript">
function getPhoneCode(){
var phoneNum=document.getElementById("phone").value;
if(phoneNum == ""){
alert("请输入手机号");
}else{
refresh_code();
}
}
function refresh_code(){
var yy1 = getRand();
var phoneNum=document.getElementById("phone").value;
document.getElementById("logcode").value="";
$("#mg").attr("src",'yanzheng1.jsp?yy='+yy1+'&phone='+phoneNum);
}
function getRand(){
var str="0123456789abcdefghijklmnopqrstuvwxyz";
var a="";
for(i=0;i<4;i++){
a+=str.charAt(parseInt(Math.random()*36))
}
return a;
}
function chk(){
var code_value = document.getElementById("code").value;
var code_src = document.getElementById("mg").src;
var yy = code_src.substring(code_src.indexOf('=')+1,code_src.lastIndexOf('&'));
if(code_value != yy){
return;
}else{
jQuery("#logcode").attr("disabled", false);
getOneCode();
}
}
function getOneCode(){
alert("将手机号存放在cookie中");
var phoneNum=document.getElementById("phone").value;
setCookie("phoneNumber",phoneNum);
//var strCookie = getCookie("phoneNumber");
//alert(strCookie);
alert("发送短信验证码");
$.post("${pageContext.request.contextPath}/SendPhoneCode?method=sendMS",{phoneNumber:phoneNum},function(data){
jQuery("#btn").attr("disabled", true);
updateTimeLabel(60);
});
}
function updateTimeLabel(time) {
var btn = jQuery("#btn");
var a_sendcode = jQuery("#logcode");
btn.val(time <= 0 ? "免费获取验证码" : ("" + (time) + "秒后点击重新发送"));
var hander = setInterval(function () {
if (time <= 0) {
clearInterval(hander);
hander = null;
btn.val("免费获取验证码");
btn.attr("disabled", false);
a_sendcode.attr("disabled", false);
jQuery("#strVcodeTip").text("");
}
else {
btn.val("" + (time--) + "秒后点击重新发送");
}
}, 1000);
}
//写cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//读取cookies
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
function register(){
$.ajax({
type:"post",
url:"${pageContext.request.contextPath}/SendPhoneCode?method=register",
data:{"phoneNumber":$("#phone").val()},
success:function(data){
alert(data);
}
});
alert("注册");
}
</script>
</head>
<body>
手机号：<input type="text" id="phone" name="phoneNumber" value=""><br>
手机验证码：<input type="text" id="logcode" disabled="disabled" value="">
<input type="button" id="btn" onclick="getPhoneCode()" value="免费获取验证码" /><br>
<script type="text/javascript">
document.write("<img id='mg' class='codeNumber' onclick='refresh_code()'>");
</script>
<h1></h1>
验证码:<input type="text" id="code" value="" /><br>
<input type="button" id="btn2" onclick="chk()" value="确定">
<hr>
<input type="button" id="all_btn" onclick="register()" value="注册">
</body>
</html>
yanzheng1.jsp用于画图
<%@ page contentType="application/jpg;charset=gbk" %>
<%@ page import="java.awt.*" %>
<%@ page import="java.awt.image.*" %>
<jsp:directive.page import="javax.imageio.ImageIO"/>
<%
BufferedImage img=new BufferedImage(60,26,BufferedImage.TYPE_USHORT_555_RGB);
Graphics g=img.createGraphics();
g.setColor(Color.decode("#f0f0f0"));
g.fillRect(0,0,60,26);
String a=request.getParameter("yy");
session.setAttribute("yy",a);
g.setFont(new Font("黑体",Font.BOLD,20));
g.setColor(Color.decode("#3a8cd5"));
g.drawString(a,5,20);
for(int i=0;i<3;i++){
int j=(int)(Math.random()*256);
int k=(int)(Math.random()*256);
int l=(int)(Math.random()*256);
int x1=(int)(Math.random()*61);
int y1=(int)(Math.random()*31);
int x2=(int)(Math.random()*61);
int y2=(int)(Math.random()*31);
Color m=new Color(j,k,l);
g.setColor(m);
g.drawLine(x1,y1,x2,y2);
}
ImageIO.write(img,"jpg",response.getOutputStream());
out.clear();
out = pageContext.pushBody();
%>
servlet简单的测试代码
package com.yanzheng;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class SendPhoneCode extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String method = request.getParameter("method");
if(method.equals("sendMS")){
sendMS(request, response);
}
if(method.equals("register")){
register(request, response);
}
}
public void register(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
String phoneNum = request.getParameter("phoneNumber");
Cookie[] cookies = request.getCookies();
String testPhoneNum="";
for(int i=0;i<cookies.length;i++){
if(cookies[i].getName().equals("phoneNumber")){
System.out.println(cookies[i].getValue());
testPhoneNum=cookies[i].getValue();
}
}
if(!phoneNum.equals(testPhoneNum)){
response.getWriter().write("该手机号码与验证码不匹配！");
}else{
response.getWriter().write("注册成功！");
}
}
public void sendMS(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Cookie[] cookies = request.getCookies();
String phoneNum = request.getParameter("phoneNumber");
String testPhoneNum="";
for(int i=0;i<cookies.length;i++){
if(cookies[i].getName().equals("phoneNumber")){
System.out.println(cookies[i].getValue());
testPhoneNum=cookies[i].getValue();
}
}
System.out.println(testPhoneNum.equals(phoneNum));
}
}
