JQuery 验证插件Ajax Fancy Capcha的使用（JAVA版本）
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>
<!--该DIV就是产生验证码图片的地方-->
<input type="button" value="提交" onclick="login();"/>
</form>
</body>
</html>
JSP页面处理好以后，需要处理的就是JS代码了，JS代码其实很简单，就在jquery.captcha.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
<action path="/UploadAction"
type="com.action.UploadAction"
scope="request" validate="false">
</action>
<action path="/RandomCode"
type="com.action.RandomCodeAction"
scope="request" validate="false">
</action>
<action path="/Login"
type="com.action.LoginAction"
scope="request" validate="false">
</action>
通过上面几步，就可以看见基本的效果了： 
在拖动图片到圆圈内时，Fancy会创建一个隐藏字段，代码如下：
- ...
- $("#" + 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的值是否与刚才从服务端传过来的数字是否相等即可;
写完！