Web页面动态验证码

结果如下：

如果输入错误，鼠标在输入框之外点击则

输入正确则不会显示出

点击提交跳转到成功的页面，注意此时搜索栏已经变化

算法实现

动态验证码实现首先得有一个算法。

定义一个数组用来存放生成的验证码

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>

如果不能运行，这是我的代码

http://download.csdn.net/download/xiao_ma_csdn/10246312

Web页面动态验证码相关推荐

java 图形校验_java图形验证码生成工具类 web页面校验验证码
java图形验证码生成工具类 web页面校验验证码发布于 2020-7-14| 复制链接摘记: 最近做验证码,参考网上案例,发现有不少问题,特意进行了修改和完善.验证码生成器: ```java i ...
JavaScript实现页面动态验证码
引言: 现在很多在用户登陆或注册的时候为了防止程序攻击,加入了动态验证的技术,一般是让用户输入随即生成的验证码来实现.我自己写了一个没有跟后台交互的,就在前端验证,发出来给大家看看. 效果图: 实现思 ...
java验证码验证码_Java登录页面实时验证用户名密码和动态验证码
●登录名和密码是同时验证的,并不是先验证登录名是否存在,然后再验证密码是否正确,是同时进行验证,若登录名和密码当中一个条件不符合,则提示用户登录名或者密码错误, 这样做的意义是为了保证用户信息的安全( ...
Java登录页面实时验证用户名密码和动态验证码
●登录名和密码是同时验证的,并不是先验证登录名是否存在,然后再验证密码是否正确,是同时进行验证,若登录名和密码当中一个条件不符合,则提示用户登录名或者密码错误, 这样做的意义是为了保证用户信息的安全( ...
web页面验证码生成
web页面验证码生成 kaptcha 是一个非常实用的验证码生成工具.有了它,你可以生成各种样式的验证码,因为它是可配置的.kaptcha工作的原理是调用 com.google.code.kapt ...
怎么用php配合js编写动态页面_JavaScript_JavaScript教程:用JS脚本实现Web页面信息交互范例，要实现动态交互，必须掌握有 - phpStudy...
要实现动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识. 三.范例下面我们演示通过点击一个按钮(red)来改变窗口颜色,点击"调用动态按钮文档" ...
Web应用部署到Linux无法显示动态验证码问题
项目介绍: 跟着风清扬老师做黑马旅游线路的项目时遇到了一些问题,主要体现为部署到服务器后路线分类和登录注册时验证码不显示. 问题:Windows环境下在Tomcat部署项目,在注册与登录功能中,可以显 ...
web页面注册验证，实现从后端动态获取证码，到前端页面显示
文章目录前言一.创建生成验证码的工具类二.创建Servlet,将生成的验证码发送到前端页面三.从前端页面接收验证码四.编写js函数,实现点一下获取新的验证码前言验证码模板,可供参考. 一 ...
Django 20购物商城项目（注册、登录页面：生成动态验证码）
dDjango 20购物商城项目 1.安装pillow 2.在注册页面加入验证码 2.1.register.html (增加内容) 2.2.register.js(增加内容) 2.2.路由.视图(增加 ...