標籤：
驗證碼流程
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);} //寫cookiesfunction 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();} //讀取cookiesfunction 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));}}
手機驗證碼執行流程
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
