验证码怎么做啊

这个可以不<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <style type="text/css">        .code
        {
            background-image:url(code.jpg);
            font-family:Arial;
            font-style:italic;
            color:Red;
            border:0;
            padding:2px 3px;
            letter-spacing:3px;
            font-weight:bolder;
        }
        .unchanged
        {
            border:0;
        }
    
</style>
    <script language="javascript" type="text/javascript">
var code ; //在全局 定义验证码
     function createCode()
     { 
       code = "";
       var codeLength = 6;//验证码的长度
       var checkCode = document.getElementById("checkCode");
       var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符，当然也可以用中文的
        
       for(var i=0;i<codeLength;i++)
       {
      
        
       var charIndex = Math.floor(Math.random()*36);
       code +=selectChar[charIndex];
       
       
       }
//       alert(code);
       if(checkCode)
       {
         checkCode.className="code";
         checkCode.value = code;
       }
       
     }
     
      function validate ()
     {
       var inputCode = document.getElementById("input1").value;
       if(inputCode.length <=0)
       {
           alert("请输入验证码！");
       }
       else if(inputCode != code )
       {
          alert("验证码输入错误！");
          createCode();//刷新验证码
       }
       else
       {
         alert("^-^ OK");
       }
       
       }
</script>
</head>
<body>
<form  action="#">
     <input  type="text"  onclick="createCode()" id="input1" />
    
    <input type="text"  id="checkCode" class="unchanged" style="width: 80px"  /><br />
    <input id="Button1"  onclick="validate();" type="button" value="确定" /> 
</form>
</body>
</html>

解决方案 »

  1.   


    <html>
    <head>
    <title>随机显示4位验证码</title>
    <script language="javascript">function msg()
    {
    var changenumber=Math.floor(Math.random()*9000+1000);
    document.getElementById('temp').innerHTML=changenumber;
    }function check(){
    if(form1.text.value.length==0 )
    {
    alert("请输入验证码")
    form1.text.focus()
    return false
    }if(form1.text.value!==document.getElementById('temp').innerHTML)
    {
    alert("请输入正确的验证码！")
    form1.text.focus()
    return false
    }
    }
    </script></head>
    <body onload="msg()" >
    <form name="form1" onsubmit="return check()">
    <input type="text" size="10"   name="text" >
    <span id="temp"></span><input type="submit" value="提交"> 
    </form>
    </body>
    </html>
      

  2.   

    关于如何把验证码写入图片中，并调用：
    1.以下代码是纯数字的验证码，把以下代码保存为单独的JSP或HTML文件，我保存为：imag.jsp
    <%@ page language="java" contentType="image/jpeg; charset=gb2312" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" 
        pageEncoding="gb2312"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head><title>验证码</title>
    </head>
    <body><%! 
    Color getRandColor(int fc,int bc){//给定范围获得随机颜色 
            Random random = new Random(); 
            if(fc>255) fc=255; 
            if(bc>255) bc=255; 
            int r=fc+random.nextInt(bc-fc); 
            int g=fc+random.nextInt(bc-fc); 
            int b=fc+random.nextInt(bc-fc); 
            return new Color(r,g,b); 
            } 
    %> 
    <% 
    //设置页面不缓存 
    response.setHeader("Pragma","No-cache"); 
    response.setHeader("Cache-Control","no-cache"); 
    response.setDateHeader("Expires", 0); // 在内存中创建图象 
    int width=60, height=20; 
    BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); // 获取图形上下文 
    Graphics g = image.getGraphics(); //生成随机类 
    Random random = new Random(); // 设定背景色 
    g.setColor(getRandColor(200,250)); 
    g.fillRect(0, 0, width, height); //设定字体 
    g.setFont(new Font("Times New Roman",Font.PLAIN,18)); //画边框 
    //g.setColor(new Color()); 
    //g.drawRect(0,0,width-1,height-1); 
    // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到 
    g.setColor(getRandColor(160,200)); 
    for (int i=0;i<155;i++) 
    { 
    int x = random.nextInt(width); 
    int y = random.nextInt(height); 
            int xl = random.nextInt(12); 
            int yl = random.nextInt(12); 
    g.drawLine(x,y,x+xl,y+yl); 
    } // 取随机产生的认证码(4位数字) 
    String sRand=""; 
    for (int i=0;i<4;i++){ 
        String rand=String.valueOf(random.nextInt(10)); 
        sRand+=rand; 
        // 将认证码显示到图象中 
        g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成 
        g.drawString(rand,13*i+6,16); 
    } 
    // 将认证码存入SESSION 
    session.setAttribute("rand",sRand); 
    // 图象生效 
    g.dispose(); // 输出图象到页面 
    ImageIO.write(image, "JPEG", response.getOutputStream()); %> </body>
    </html>
      

  3.   

    2.在要用的地方调用验证码页面（imag.jsp）,主要用到了<img>标签显示验证码页面，并且点击图片会重新生成新的验证码：
    <tr>
     <td height="37">&nbsp;</td>
     <td align="right">验 证 码：</td>
     <td width="17%">
     <input name="chCode" type="text"  id="chCode" autocomplete="off" style="cursor: text"> 
     <img name=img border=0 src="imag.jsp" style="cursor: pointer" onClick="this.src='imag.jsp'" /></td>
      <td width="23%">&nbsp;</td>
    </tr>