繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 使用JQuery和s3captche实现一个水果名字的验证
- Javascript
- js 判断 enter 事件
- 谷歌浏览器 insertCell与appendChild的区别
- 从JavaScript 到 JQuery (1)学习小结
- JavaScript实现动态增加文件域表单
- JavaScript DOM 添加事件
- Javascript 跨域访问解决方案
- 检测是否已安装 .NET Framework 3.5的js脚本
- JavaScript 获得选中文本内容的方法
- Javascript 获取链接(url)参数的方法
- javascript Ext JS 状态默认存储时间
- 动态为事件添加js代码示例
- JSON扫盲帖 JSON.as类教程
- JavaScript 全面解析各种浏览器网页中的JS 执行顺序
- js实现权限树的更新权限时的全选全消功能
- javascript Table 中2个列（TD）的交换实现代码
- js表数据排序 sort table data
- javascript css在IE和Firefox中区别分析
- JAVASCRIPT IE 与 FF中兼容问题小结
- 判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
- csdn 批量接受好友邀请
Javascript 中的 使用JQuery和s3captche实现一个水果名字的验证
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 315 ::
收藏到网摘: n/a
大家登陆各种网站见到的验证码应该无外乎数字,字母和汉字。有没有见识过使用水果名字和水果图片来验证客户端不是个机器人吗？
先看个图片：
1.介绍:
s3captcha是一个非常有用的可以让图片顺序显示的一个JQuery插件。它是通过php实现的。但是我发现很容易把它转化为asp.net和C#的代码。 我做了一个config的配置文件可以在文件中配置图片的源和名字等。
然后介绍一下s3captcha的实现原理,
上图所示是它的实现模式。
1.它随即生成图片的index;
2.把一系列随机数据赋给图片的index.
3.可以从图片列表中选择一个随机的index.
4.让图片随机的显示为一个radio box.
它使用JQuery实现的radio box到图片List的转换。
2.代码:
首先是把图片的index数组顺序打乱,重新输出：
复制代码 代码如下:
public static List<int> shuffle(List<int> input)
{
List<int> output = new List<int>();
Random rnd = new Random();
int FIndex;
while (input.Count > 0)
{
FIndex = rnd.Next(0, input.Count);
output.Add(input[FIndex]);
input.RemoveAt(FIndex);
}
input.Clear();
input = null;
rnd = null;
return output;
}
使用xml来作为s3captche的配置文件:
复制代码 代码如下:
<?xml version="1.0" encoding="utf-8" ?>
<s3capcha>
<icons>
<name>apple,cherry,lemon,pear,strawberry</name>
<title>Apple,Cherry,Lemon,Pear,Strawberry</title>
<width>33</width>
<height>33</height>
<ext>jpg</ext>
<folder>fruit</folder>
</icons>
<message>Verify that you are a human not robot, please choose {0}</message>
</s3capcha>
GetHtmlCode的代码：
复制代码 代码如下:
public static string GetHtmlCodes(string PathTo, out int SessionValue)
{
bool HasValue = false;
if (string.IsNullOrEmpty(Message))
HasValue = LoadConfig();
else
HasValue = true;
if (HasValue)
{
Random Rnd = new Random();
int RandomIndex = Rnd.Next(0,IconNames.Length);
List<int> values = new List<int>();
for(int i = 0; i < IconNames.Length;i++)
values.Add(i);
values = shuffle(values);
string WriteThis = "<div class=\"s3capcha\"><p>" +
string.Format(Message, "<strong>" + IconTitles[values[RandomIndex]] +
"</strong>") + "</p>";
int[] RandomValues = new int[IconNames.Length];
for (int i = 0; i < IconNames.Length; i++)
{
RandomValues[i] = Rnd.Next();
WriteThis += string.Format(RowTemplate,
IconTitles[values[i]], RandomValues[i],
PathTo + "/icons/" + Folder + "/" +
IconNames[values[i]] + "." + Extention,
Width, Height);
}
WriteThis += "<div style="\" style="\""clear:left\"></div></div>";
SessionValue = RandomValues[RandomIndex];
return WriteThis;
}
else
{
SessionValue = -1;
return "Invalid data, config file not found";
}
}
3.使用ajax方法来实现验证信息的判断弹出框:
s3capcha.ashx 用来实现当向服务器请求时,返回html：
复制代码 代码如下:
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/html";
int USession;
context.Response.Write(s3capcha.GetHtmlCodes("../../s3capcha", out USession));
context.Session[s3capcha.s3name] = USession;
context.Response.End();
}
verify.ashx文件·来实现验证功能:
复制代码 代码如下:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
if (s3capcha.Verify(context.Session[s3capcha.s3name],
context.Request.Form[s3capcha.s3name]))
context.Response.Write("Success");
else
context.Response.Write("Fail");
context.Response.End();
}
JQuery实现的ajax代码:
复制代码 代码如下:
//Javascript codes
$(document).ready(function() {
getCapcha();
$("form").bind('submit', function() {
$.ajax({
url: 'verify.ashx',
type: 'POST',
data: { 's3capcha': $("input[name=s3capcha]:checked").val() },
cache: false,
success: function(data) {
alert(data);
getCapcha();
}
});
return false;
});
});
评论 (0) All
