如何实现验证码

我们经常在登陆一些网站的时候，要求输入显示的验证码，而且验证码是以图片形式提供，这是怎么实现的？
唯一的解释就是这些图片都是程序生成的。也就是程序“画”出来的！如何画？请看一段代码：

int width=40, height=20;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
//以下填充背景颜色
g.setColor(Color.decode("#66CCCF"));
g.fillRect(0, 0, width, height);
g.setColor(Color.decode("#01556B"));
g.drawString(req.getParameter("yzm"),5,15);
g.dispose(); 
我们把页面传过来的(req.getParameter("yzm")“画”在一个40，20大小的矩形框内。这段代码当然要放一个servlet里面，这个servlet就是来负责画图的：

import java.io.IOException;
import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.*;
import javax.servlet.ServletContext;
import java.io.OutputStream;
import java.awt.*;
import java.awt.image.*;
import com.sun.image.codec.jpeg.*;

/**
* @version 1.0
* @author dennis
*/
public class Getshowimg extends HttpServlet {

public void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {

resp.setContentType("image/jpeg;charset=gb2312");
int width=40, height=20;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
//以下填充背景颜色
g.setColor(Color.decode("#66CCCF"));
g.fillRect(0, 0, width, height);
g.setColor(Color.decode("#01556B"));
g.drawString(req.getParameter("yzm"),5,15);
g.dispose(); 
OutputStream toClient = resp.getOutputStream();
JPEGImageEncoder encoder =JPEGCodec.createJPEGEncoder(toClient);
encoder.encode(image);
toClient.close();
}
}



好了，图已经知道怎么画了，接下来的问题就是我们怎么在页面上显示这个图？这个图同样也是个image，当然放在一个img元素里面。另外，我们应该在页面每一次刷新时都显示不同的验证码，所以应该在body的onload的事件里调用上面的servlet。来了，首先是页面：

验证码：<input name="yzm" type="text" size="12" onKeyPress="dojudge()" id="yzm0"></td>
<div id="yzm1" style="width:10" style="display:none"></div><IMG src='servlet/Getshowimg?yzm=0' id="img0" vspace=3>

为什么要有个ID为yzm1的隐藏层？？你可能要问。试想，我们如何判断用户输入的验证码和图片的一样呢？我们要读取text里输入的验证码，我们如何读取图片显示的验证码呢？？这就是隐藏层的价值所在，我们把随机生成的验证码分成两份，一份保存在隐藏层里，一份传到servlet。判断的时候，我们根本不需要知道图片显示什么，图片显示的跟隐藏层的里一样！我们只要把隐藏层里的值与text里的值判断就OK了。javascript的doinit()函数，被body的onload事件调用：

function doinit()
{
document.form1.username.focus();
var tmp=Math.random();
while (true)
{
if (tmp>=0.1)
{
var num=Math.round(tmp*10000);
document.getElementByIdx("yzm1").innerHTML="<font color='#01556B'>"+num+"</font>";
document.getElementByIdx("img0").src="servlet/Getshowimg?yzm="+num;
break;
}else
tmp=Math.random();
}

}
在登陆按钮中加入事件,判断输入是否正确:
if (document.form1.yzm.value!=document.getElementByIdx("yzm1").innerText)
{
alert("请输入有效的验证码!");
document.form1.yzm.value="";
document.form1.yzm.focus();
return false;
}