使用JQuery和s3captche实现一个水果名字的验证


Posted in Javascript onAugust 14, 2009

先看个图片:

使用JQuery和s3captche实现一个水果名字的验证

1.介绍:

 s3captcha是一个非常有用的可以让图片顺序显示的一个JQuery插件。它是通过php实现的。但是我发现很容易把它转化为asp.net和C#的代码。 我做了一个config的配置文件可以在文件中配置图片的源和名字等。

 然后介绍一下s3captcha的实现原理,

使用JQuery和s3captche实现一个水果名字的验证

上图所示是它的实现模式。
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; 
}); 
});
Javascript 相关文章推荐
javascript form 验证函数 弹出对话框形式
Jun 23 Javascript
JavaScript 对象、函数和继承
Jul 07 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
vue中如何自定义右键菜单详解
Dec 08 Vue.js
img标签中onerror用法
Aug 13 #Javascript
什么是JavaScript
Aug 13 #Javascript
Javascript Global对象
Aug 13 #Javascript
Javascript Math对象
Aug 13 #Javascript
Javascript 作用域使用说明
Aug 13 #Javascript
Javascript 继承机制实例
Aug 12 #Javascript
Javascript 继承机制的实现
Aug 12 #Javascript
You might like
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
php简单的会话类代码
2011/08/08 PHP
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
详解python中list的使用
2019/03/15 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
django如何实现视图重定向
2019/07/24 Python
django迁移数据库错误问题解决
2019/07/29 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
九九重阳节标语
2014/10/07 职场文书
钳工实训报告总结
2014/11/04 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
党员承诺书格式范文
2015/04/28 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android