结果如下：
如果输入错误，鼠标在输入框之外点击则
输入正确则不会显示出
点击提交跳转到成功的页面，注意此时搜索栏已经变化
算法实现
动态验证码实现首先得有一个算法。
定义一个数组用来存放生成的验证码
String ver[] = new String[62];
第一种，定义一个字符串数组，由0-9，a-z,A-Z组成，共62
public void init(){for(int i = 0;i < 10;i ++){ver[i] = new Integer(i).toString();}//97-122是afor(int i = 0;i < 26;i ++){ver[i + 10] = new Character((char)(97 + i)).toString();}//65-90是A-Zfor(int i = 0;i < 26;i ++){ver[i + 36] = new Character((char)(65 + i)).toString();}}
//第二种方法，生成随机的数字和字母
private String getValidateCode(){StringBuffer vali = new StringBuffer();for(int i = 0;i < 4;i ++){vali.append(ver[(int)(Math.random() * 36)]); }return vali.toString();}
生成验证码servlet
这里用第一种方法生成验证码
生成验证码代码：
public class yzmServlet extends HttpServlet{String ver[] = new String[62] public void init(){for(int i = 0;i < 10;i ++){ver[i] = new Integer(i).toString();}//97-122是afor(int i = 0;i < 26;i ++){ver[i + 10] = new Character((char)(97 + i)).toString();}//65-90是A-Zfor(int i = 0;i < 26;i ++){ver[i + 36] = new Character((char)(65 + i)).toString();}}//第二部获取绘图能力public void doGet(HttpServletRequest request,HttpServletResponse response){try {//设置图像输出 response.setContentType("image/jpeg");//获取输出流OutputStream os = response.getOutputStream();//在内存中准备一个imageBufferedImage image = new BufferedImage(60,30,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics(); //绘图g.setColor(new Color(200,200,200));g.fillRect(0, 0, 80, 50); //生成并绘制随机字符串String vali = "";for(int i = 0;i < 4;i ++){String v = (ver[(int)(Math.random()*36)]);vali += v;g.setColor(new Color((int)(Math.random()*150),(int)(Math.random()*150),(int)(Math.random()*150)));g.drawString(v, 8 * i + 10, 15);}g.dispose(); //创建session，设置属性HttpSession session = request.getSession();session.setAttribute("vali", vali);} catch (Exception e) {// TODO: handle exception}}}
这个session主要是要发送验证码到进行验证的servlet比对
HttpSession session = request.getSession();session.setAttribute("vali", vali);
验证的servlet
public class A 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 {request.setCharacterEncoding("utf-8");String yzm = request.getParameter("yzm");String a = (String)request.getSession().getAttribute("vali");System.out.println(a+"==="+yzm);if(!(yzm.equals((String)request.getSession().getAttribute("vali")))){response.getWriter().write("wrong");}}}
这里用到Ajax的内容
jsp页面
<script type="text/javascript">function chenyang() {//1.获取yzm标签，并为其添加onclick响应函数var yzm = document.getElementById("yzm").value//3.创建一个XMLHttpRequest对象var res = new XMLHttpRequest();//4.准备发送请求的数据：method 和 urlvar method = "get";var url = "A?yzm="+yzm//5.调用xmlhttprequest对象的open方法res.open(method, url);//6.调用xmlhttprequest对象的send方法res.send(null);//7.为xmlhttprequest对象添加onreadystatechange响应函数res.onreadystatechange = function() {//8.决断响应是否完成：xmlhttprequest对象的readystate属性值为4if (res.readyState == 4) {//9.再决断响应是否可用：xmlhttprequest对象status属性值为200if (res.status == 200) {//10.打印响应结果：responseText document.getElementById("message").innerHTML = res.responseText;}}}} </script> </head><body><form action="Success.jsp" method="get"> 验证码：<input type="text" name="yzm" id="yzm" onblur="chenyang()"> <img alt="" id="Img" src="yzmServlet" onclick="this.src=this.src+'?'+Math.random();" ><div id="message"><!-- 这里接受servlet响应的结果 --></div><input type="submit"></form></body></html>
如果不能运行，这是我的代码
/download/xiao_ma_csdn/10246312
