使用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写的一个自定义弹出式对话框代码
Jan 17 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
JavaScript知识点整理
Dec 09 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
浅析vue深复制
Jan 29 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
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
php中++i 与 i++ 的区别
2012/08/08 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
8个PHP数组面试题
2015/06/23 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
Use Word to Search for Files
2007/06/15 Javascript
jquery tools之tooltip
2009/07/25 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
python实现词法分析器
2019/01/31 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
聊聊python中的循环遍历
2020/09/07 Python
Django返回HTML文件的实现方法
2020/09/17 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
爱国卫生月实施方案
2014/02/21 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
课程设计的心得体会
2014/09/03 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
邀请函样本
2015/02/02 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang