您的位置:首页 > Web前端 > JavaScript

JSP带验证码的登录实现

2013-08-14 12:29 393 查看

JSP带验证码的登录实现

<script>
function f()
{
document.getElementById("username").focus();
}
function check()//这个检查的方法可能写的并不好,输入空格的情况就没有判断
{
   var username=document.getElementById("username").value;
   var pwd=document.getElementById("pwd").value;
   var yzm=document.getElementById("yzm").value;
   if(username.length==0)
   {
     alert("请输入用户名");
     return false;
   }
   if(pwd.length==0)
   {
    alert("请输入密码");
    return false;
   }
   if(yzm.length==0)
   {
     alert("请输入验证码");
     return false;
   }
}
</script>
</div>
<--!这就是用户需要填写的表单-->
<form method="get" action="">
   用户名:<input type="text" name="username"/> <br>
密码 : <input type="password" name="pwd"/><br>
验证码: <input type="text" name="yzm" style="width=50;"/>
<img src="http://mcmrc7jvie8v71n:8080/tax/servlet/Check" onclick="history.go(0)" title="点击刷新验证码"/><br>
<input type="submit" name="submit" Onclick="return check()" value="登录"/>
<input type="reset" name="reset" value="重置" />
</form>
<%=error%><br>
</div>
<jsp:include flush="false" page="bottom.html"></jsp:include>
   </body>
</html>
这里验证码是用servlet来实现的,在服务器端绘制好图片后直接用图片标签来调用就可以了<img src="http://mcmrc7jvie8v71n:8080/tax/servlet/Check" onclick="history.go(0)" title="点击刷新验证码"/>
生成验证图片的servlet类代码如下:
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class Check extends HttpServlet {

public String suijima(){
   char [] str="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();
   Random rd=new Random();
   String suiji="";
   int temp=0;
   for(int i=0;i<4;i++){
    temp=rd.nextInt(36);
     suiji+=str[temp];
   }
   return suiji;
}

public void service(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
   String sjm=suijima();
//将生成的随机码保存在session中
   HttpSession session=request.getSession();
     session.setAttribute("check",sjm); //在登录验证的时候会首先检查验证码是否输入正确
     
   BufferedImage buffimg=new BufferedImage(60,20,
                BufferedImage.TYPE_INT_RGB);
   Graphics g=buffimg.createGraphics();
   Random rd=new Random();
   int cr,cg,cb;
   cr=rd.nextInt(255);
   cg=rd.nextInt(255);
   cb=rd.nextInt(255);
   Color mycolor=new Color(cr,cg,cb);
   //干扰线
   g.setColor(mycolor);
     for (int i = 0; i < 10; i++)
        {
            int x1 = rd.nextInt(60);
            int x2 = rd.nextInt(60);
            int y1 = rd.nextInt(20);
            int y2 = rd.nextInt(20);
            g.drawLine(x1, y1, x2, y2);
        }
     //显示随机码
     Font myfont=new Font("times new roman",Font.PLAIN,19);
   g.setFont(myfont);  
   g.setColor(Color.WHITE);
   g.drawString(sjm,5,15);
  
        //将图像输出到servlet输出流中。
        ServletOutputStream sos=response.getOutputStream();
        ImageIO.write(buffimg, "jpeg",sos);
        sos.close();
        g.dispose();
}
}

验证登录成功的代码如下:
<jsp:useBean id="con" class="myBean.Dbcon" scope="page"/>
<%
    String strName=request.getParameter("username");
    String strPwd=request.getParameter("pwd");
    String strYzm=request.getParameter("yzm"); //用户输入的验证码
    String stryz=(String)session.getAttribute("check"); //servlet中生成的验证码
    String error="";
    boolean check=false;
    ResultSet myset;
    if(strYzm!=null&&stryz!=null)
    {
        strYzm=strYzm.toUpperCase();
       if(!strYzm.equals(stryz))
       {
         error="<font color='red'>验证码输入错误!</font>";
       }
       else
       {
         check=true;
       }
    }
    if(strName!=null&&strPwd!=null&&check)
    {
        //con是写的一个专门访问数据库的JavaBean,调用它的getset方法返回结果集
     myset=con.getset("select * from student where stu_id='"+strName+"' and pwd='"+strPwd+"'");
     if(myset!=null)
     {
       myset.last();
       if(myset.getRow()==1)
        {
          session.setAttribute("name",strName);
          session.setAttribute("pwd",strPwd);
          response.sendRedirect("index.jsp?");
        }
        else
        {
           error="用户名或密码错误!";
        }
     }
     con.close();
    }
%>
运行结果:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: