JQuery 验证插件Ajax Fancy Capcha的使用（JAVA版本）

baobeituping

浏览: 1064576 次
性别:
来自: 长沙

最近访客更多访客>>

lindow

huazai740

Java技术干货

ccsxin201

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JS篇

Ajax Java jQuery Struts JavaScript

1.首先下载Ajax Fancy Capcha的所有JS，CSS，以及图片文件

2.写JSP页面

<%@ page language="java" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>upload index</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

<script type="text/javascript"
              src="/JQueryUpload/js/jquery.js"></script>
<script type="text/javascript"
              src="/JQueryUpload/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript"
              src="/JQueryUpload/js/jquery.captcha.js"></script>

<script type="text/javascript" charset="gbk">
$(function() {
$(".ajax-fc-container").captcha({formId: "myForm"});
});

function login()
{
  var code = document.getElementById("captchacode");
  if(code==null)
  {
   alert("请拖动提示中给的元素!");
   return false;
  }
   document.myForm.submit();
}
</script>

<link rel="stylesheet" type="text/css"
   href="/JQueryUpload/captcha/captcha.css"></link>
</head>

<body>
<form action="/JQueryUpload/Login.do" id="myForm" name="myForm" method="post">
<div class="ajax-fc-container"></div>

<input type="button" value="提交" onclick="login();"/>
</form>

</body>
</html>

JSP页面处理好以后，需要处理的就是JS代码了，JS代码其实很简单，就在jquery.captcha.js
文件内，这里需要注意两点：

一、验证的基本显示，例如把相应的英文改成相应的中文等，其实很简单，如：

Js代码

...
var defaults = {  
    borderColor: "",  
    captchaDir: "captcha",  
    url: "/JQueryUpload/RandomCode.do",

//该URL就是产生验证码所提交到服务器端的请求，当验证图片出现，自动去链接
    formId: "myForm",  
    text: "<font size='2'>您想获取企业么?<br />请拖动 <span>scissors</span> 进入圆圈内.</font>",
    items: Array("pencil", "scissors", "clock", "heart", "note") 
   }; ..

二、需要从服务端获得随机数字，这里需要用到AJAX请求，上面的URL就是相应的请求路径。getNumber表示请求执行此Action的getNumber方法，说到服务端，还真是麻烦，JAVA Web框架众多，但大多都复杂，就算古老的Struts，也依赖很多包，还要搞一堆配置，Struts2虽然功能强大，但用来照样有些复杂，更不用说其它的wicket,Tapestry了，就做一个简单的例子实在不想用那些复杂的框架，但是也不愿意直接用Servlet，还是Stripes好啊！功能强大，最让人称道的是它依赖的JAR特别少，只有一个common-logging文件，总算做了件好事。下面以Stripes为例，服务端的关键代码如下：

首先写RandomCodeAction

package com.action;

import java.util.Random;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

public class RandomCodeAction extends Action {

@Override
public ActionForward execute(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)
   throws Exception {
  response.setContentType("text/plain");
   int captcha = new Random().nextInt(5);
   HttpSession session = request.getSession();
   session.setAttribute("code", captcha);
         response.getWriter().write(captcha + "");
  return null;
}

}

//该ACTION会产生一个随机数保存到SESSION中，以便于你前端提交表单时候提交的验证码进行匹配；

4.配置struts.config.xml

通过上面几步，就可以看见基本的效果了：

在拖动图片到圆圈内时，Fancy会创建一个隐藏字段，代码如下：

Js代码

...
$("#" + options.formId).append("<input type=\"hidden\" style=\"display: none;\" name=\"captcha\" value=\"" + rand + "\">");
...

...
$("#" + options.formId).append("<input type=\"hidden\" style=\"display: none;\" name=\"captcha\" value=\"" + rand + "\">");
...

这个字段的值就是从服务端传过来的数字，因此判断验证是否通过，只需要在服务端判断
字段captcha的值是否与刚才从服务端传过来的数字是否相等即可;

写完！

ajax-fancy-captcha-php.zip (66.4 KB)
下载次数: 35

验证码的DEMO文件.rar (148 KB)
下载次数: 81

分享到：

图片IMG垂直居中align=absmiddle属性通不 ... | 有时候document.thisForm.submit()函数浏览 ...

2010-04-08 17:20
浏览 2592
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论