为了账号安全,请及时绑定邮箱和手机立即绑定

Servlet结合Html实现登录验证(包括验证码验证)功能

标签:
Html/CSS

Servlet生成验证码并输出:

@WebServlet(name = "yzmServlet")public class yzmServlet extends HttpServlet {    private static final int WIDTH = 100;    private static final int HEIGHT = 40;    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {         doGet(request,response);    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        response.setCharacterEncoding("utf-8");        response.setContentType("text/html;charset=utf-8");        request.setCharacterEncoding("utf-8");        BufferedImage image=new BufferedImage(WIDTH,HEIGHT, BufferedImage.TYPE_INT_RGB);        Graphics g=image.getGraphics();        //设置背景色        g.setColor(Color.CYAN);        //填充背景色        g.fillRect(0,0,WIDTH,HEIGHT);        //设置前景色        g.setColor(Color.BLACK);        //设置字体        Font font=new Font("仿宋",Font.BOLD,20);        g.setFont(font);        //获取验证码        int len=4;        String result="";        for(int x=0;x<len;x++){            char c=(char) RandomUtils.nextInt(65,91);            result=result+c;        }        g.drawString(result,20,20);        //设置干扰线条        for(int i=0;i<10;i++){            int x1= RandomUtils.nextInt(0,WIDTH);            int x2= RandomUtils.nextInt(0,WIDTH);            int y1= RandomUtils.nextInt(0,HEIGHT);            int y2= RandomUtils.nextInt(0,HEIGHT);            Color color=new Color(RandomUtils.nextInt(0,255),RandomUtils.nextInt(0,255),RandomUtils.nextInt(0,255));            g.setColor(color);            //设置线条            g.drawLine(x1,y1,x2,y2);        }        //将获取到的验证码存储到Session中        HttpSession session=request.getSession();        session.setAttribute("identifyCode",result);        //输出图片        BufferedOutputStream bos=new BufferedOutputStream(response.getOutputStream());        ImageIO.write(image,"jpg",bos);        //ImageIO.write(image,"jpg",new File("e:\\b.jpg"));        bos.flush();        bos.close();    }}

Servlet对登录界面输入的昵称/密码/验证码进行验证:

@WebServlet(name = "identifyYzmServlet")public class identifyYzmServlet extends HttpServlet {    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {         doGet(request,response);    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {         response.setCharacterEncoding("utf-8");         response.setContentType("text/html;charset=utf-8");         request.setCharacterEncoding("utf-8");         //获取输入的用户名         String username=request.getParameter("username");        //获取输入的密码         String password=request.getParameter("password");         //获取输入的验证码         String yzm2=request.getParameter("yzm01");         //获取Session对象中存取的数据         HttpSession session1=request.getSession();         String yzm1=(String)session1.getAttribute("identifyCode");         if(!username.equals("")&&!password.equals("")&&!yzm2.equals("")){             if(username.equals("Bighead")) {                 if (password.equals("4214963")) {                     if (yzm1.equals(yzm2)) {                         response.getWriter().println("登录成功");                         //登录成功后跳转到的页面                         //request.getRequestDispatcher("form01.html").forward(request,response);                     } else {                         response.getWriter().println("验证码有误,请重新输入");                     }                 } else {                     response.getWriter().println("密码有误,请重新输入");                 }             }else{                 response.getWriter().println("昵称有误,请重新输入");             }        }else{            response.getWriter().println("昵称或密码或验证码不能为空,请输入");       }    }}

web-xml进行配置:

-<servlet><servlet-name>identifyYzmServlet</servlet-name><servlet-class>com.westos.identifyYzmServlet</servlet-class></servlet>-<servlet-mapping><servlet-name>identifyYzmServlet</servlet-name><url-pattern>/ident</url-pattern></servlet-mapping>-<servlet><servlet-name>yzmServlet</servlet-name><servlet-class>com.westos.untitle2.yzmServlet</servlet-class></servlet>-<servlet-mapping><servlet-name>yzmServlet</servlet-name><url-pattern>/yzm01</url-pattern></servlet-mapping>

html实现登录界面:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>login</title>    <style type="text/css">        #login{            border: 1px solid deepskyblue;            background-color: blanchedalmond;            width:400px;            height:250px;            padding-left: 100px;            padding-top: 50px;        }    </style>    <script type="text/javascript">        //用javaScript语言验证昵称和密码        //function check(){            //var name=document.getElementById("nicheng").value;           // var password=document.getElementById("mima").value;           // if(name=="Bighead"&&password=="4214963"){               // alert("登陆成功");               // window.document.login.action="form01.html";               // window.document.login.submit();           // }else{              //  alert("密码或昵称错误,请重新输入");           // }       // }       function identifyload() {            document.getElementById('myyzm').src = 'yzm01';       }    </script></head><body><div id="top">    <h1>登录</h1></div><div  id="login">    <form action="./ident" method="Post" name="login">        昵称:<input name="username" type="text" placeholder="请输入昵称" id="nicheng"/><br/><br/>        密码:<input name="password" type="password" placeholder="请输入密码" id="mima"/><br/><br/>        请输入验证码:<br/>        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./yzm01" height="32" id="myyzm">        <button type="button" value="看不清楚,再来一张" onclick="identifyload()">看不清楚,再来一张</button>        <input name="yzm01" type="text"/><br/>        <button type="submit" value="登录" >登录</button>        <button type="reset" value="重置">重置</button>    </form></div></body></html>

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消