`

jsp+ajax局部刷新校验验证码,onblur触发校验

阅读更多

前台显示页面:

welcome.jsp

<%@ page language="java" contentType="text/html; utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>修改个人信息</title>
<script>


function createXMLHttpRequest() {
    //表示当前浏览器不是ie,如ns,firefox
    if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}
function validate(field) {
 var div=document.getElementById("divbid");
// var reg=/[^A-Za-z0-9_]{7,10}/g;
    if (field.value.length != 0) {


       //创建XMLHttpRequest
        createXMLHttpRequest();
        var url = "codevalidate.jsp?authcode=" + field.value + "×tamp=" + new Date().getTime();//加时间戳防止缓存重复
        xmlHttp.open("GET", url, true);
        //方法地址,处理完成后自动调用,回调
        xmlHttp.onreadystatechange=function() { //匿名函数
            if(xmlHttp.readyState == 4) { //Ajax引擎初始化成功
                if (xmlHttp.status == 200) { //http协议成功
                    document.getElementById("divbid").innerHTML =xmlHttp.responseText;
                }else {
                    alert("请求失败,错误码=" + xmlHttp.status);
                }
            }
        };
        //将参数发送到Ajax引擎
        xmlHttp.send(null);
    }else {

          div.innerHTML="<div  class=\"wrong\">验证码不能为空</div>"
    }
}

function reloadImage(imgurl){

    var getimagecode=document.getElementById("codeimg");
    getimagecode.src= imgurl + "?id=" + Math.random();
      var code=<%=session.getAttribute("code")%>;
      alert(code)
}
</script>

</head>
<body>

<form action="authcode.jsp" method="post" name="loginform">

      输入验证码:<input type="text" name="authcode" id="authcode" maxlength="4" size="10" onblur="validate(this)" ><span id="divbid"></span>
      <img id="codeimg" name="codeimg" border=0 src="authcode.jsp">
      <a href="javascript:reloadImage('authcode.jsp')">看不清</a><br/>

  </form> 

  <script language="javascript" type="text/javascript">
      function reloadImage(imgurl){

          var getimagecode=document.getElementById("codeimg");
          getimagecode.src= imgurl + "?id=" + Math.random();
          var code=<%=session.getAttribute("code")%>;
          alert(code)
      }
  </script>
  </body>
  </html>

产生图片页面

authcode.jsp

<%@ page contentType="image/JPEG"  
    import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"  
    pageEncoding="GBK"%>
<%!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 < 100; 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);   
        System.out.println(rand);
    }   

    // 将认证码存入SESSION   
    session.setAttribute("code", sRand);   

    // 图象生效   
    g.dispose();   

    // 输出图象到页面   
    ImageIO.write(image, "JPEG", response.getOutputStream());   
%>

ajax动态验证页面

codevalidate.jsp

<%@ page language="java" import="java.util.*,java.util.*,java.text.*,com.neusoft.xkxt.dao.*,com.neusoft.xkxt.bean.*,com.neusoft.xkxt.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%

   String authcode=request.getParameter("authcode");
   String code=(String)session.getAttribute("code");



   if(authcode.equals(code)){
   out.println("<div class='right'>√</div>");}

   else{
   out.println("<div class='wrong'>验证码不正确</div>");}

 %>
分享到:
评论

相关推荐

    jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验).docx

    ### jsp+ajax实现的局部刷新验证验证码(onblur事件触发验证) #### 技术背景与概念 在Web应用开发中,验证码(CAPTCHA)是一种常用的安全措施,用于区分用户是人类还是自动化软件。传统的表单提交方式在提交数据时...

    jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)

    标题和描述中提到的“jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)”技术涉及的知识点主要包括了JSP页面技术、AJAX无刷新数据交互技术、以及验证码图片的生成和验证方法。下面将对这些知识点进行详细说明...

    jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路.docx

    `JSP+Ajax`的组合可以帮助我们实现这样的功能,特别是在验证用户输入方面。本文将详细介绍如何使用`JSP`和`Ajax`来实现在用户离开文本框时无刷新地验证用户名是否可用。 首先,我们需要创建一个输入页面,例如`...

    jsp+ajax发送GET请求的方法.docx

    jsp+ajax 发送 GET 请求的方法 本文主要介绍了 jsp+ajax 发送 GET 请求的方法,包含了 Ajax 数据的发送与 JSP 文件的处理技巧。下面是详细的知识点: 一、Ajax 发送 GET 请求 Ajax 发送 GET 请求是通过创建 ...

    jsp+ajax发送GET请求的方法

    通过对上述内容的理解,我们可以看出,使用JSP和Ajax相结合的方法,能够有效地提高Web应用的用户体验,特别是在需要实时数据校验和页面局部刷新的场景中,这种方法显得尤为高效。希望本文的实例能够帮助开发者在类似...

    struts2+ajax 无刷新验证身份证号是否已注册,身份证号是否正确

    在身份证号的输入框中,通过`onblur`事件触发`check`函数,当失去焦点时自动验证身份证号。 ```html &lt;input type="text" name="trainUser.cardNo" onblur="check()" /&gt; ``` 2. **JavaScript验证** 使用...

    php+ajax注册验证

    1. **事件监听**:监听表单元素的`onkeyup`、`onblur`等事件,触发验证请求。 2. **XMLHttpRequest对象**:创建一个新的XMLHttpRequest对象,用于与服务器通信。 3. **发送请求**:调用`open()`方法设置请求类型...

    ajax局部刷新一个div下jsp内容的方法

    本篇文章将深入探讨如何使用AJAX实现局部刷新一个包含JSP内容的div元素。 首先,AJAX(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,与服务器交换数据并更新部分网页的技术。在上述示例...

    ajax+servelet无刷新显示用户名

    Ajax的核心是JavaScript对象XMLHttpRequest,通过这个对象,前端可以向服务器发送请求,获取响应,并在后台处理这些数据,更新部分DOM元素,从而实现页面局部刷新。在这个例子中,用户注册时输入用户名,Ajax负责在...

    使用php+Ajax实现唯一校验实现代码[简单应用]

    在本文中,我们将探讨如何使用PHP和Ajax技术实现一个简单的唯一性校验功能,特别是针对用户名的可用性检查。这个功能对于任何用户注册系统都至关重要,因为它能确保新注册的用户名是唯一的,避免冲突。 首先,我们...

    使用AJAX(包含正则表达式)验证用户登录的步骤

    每个输入字段都有一个`onblur`事件监听器,当用户离开输入框时触发验证函数。 ```html 用户名: &lt;td&gt;&lt;input type="text" name="name" id="username" onblur="verifyName()" /&gt; 密码: &lt;td&gt;&lt;input type...

    asp.net jquery+ajax异步刷新实现示例

    当用户在文本框1中输入内容并离开焦点(blur事件)时,会触发一个AJAX请求。这里有两种实现方式: 1. 第一种方案是在文本框1上添加onblur事件,调用函数sys()。sys()函数使用$.post()发送POST请求到"test1.ashx",...

    ajax用户身份校验

    1. **前端交互**:当用户在输入框中输入用户名时,可以设置监听事件(如`onkeyup`或`onblur`),触发Ajax请求。 2. **构建请求**:在事件处理器内,创建XMLHttpRequest对象,然后调用`open()`方法,传入请求类型...

    PHP+Mysql+Ajax注册时用户名验证

    2. **Ajax**(异步JavaScript和XML)允许我们在不刷新整个页面的情况下向服务器发送请求并接收响应。在注册表单中,当用户输入用户名并失去焦点时,触发Ajax请求,前端JavaScript将发送到后端PHP脚本进行验证。 3. ...

    php+ajax实时验证

    总结来说,"php+ajax实时验证"是一个通过结合PHP和AJAX技术提升用户体验的典型应用。它减少了用户因提交无效数据而导致的额外操作,提高了表单填写的效率和准确性。实现的关键在于利用JavaScript事件监听用户输入,...

    Asp.Net+Ajax 用户名检测.txt

    - `onBlur="CheckUserName()"`:当文本框失去焦点时触发`CheckUserName`函数。 3. **JavaScript函数实现**: - `CheckUserName()`:此函数首先获取用户输入的用户名,然后使用`XMLHttpRequest`对象向服务器端发送...

    ajax汉字验证码,ajax

    在IT行业中,Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页内容的技术。这种技术极大地提升了用户体验,因为它允许用户在不中断当前操作的情况下与服务器进行数据...

    asp.net+ajax 实时验证用户名是否已经存在(自带Access数据库)

    2. 配置AJAX事件,监听文本框的onChange或onBlur事件,触发AJAX调用。这通常涉及编写JavaScript函数,设置HTTP请求的URL、方法(GET或POST)、参数(输入的用户名)等。 3. 在服务器端,创建一个处理AJAX请求的ASP...

Global site tag (gtag.js) - Google Analytics