使用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 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
老生常谈ES6中的类
Jul 31 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
vue.js实现只弹一次弹框
Jan 29 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
基于MySQL体系结构的分析
2013/05/02 PHP
浅析php学习的路线图
2013/07/10 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
js实现选项卡效果
2020/03/07 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
浅析python函数式编程
2020/09/26 Python
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
初中校园之声广播稿
2014/01/15 职场文书
创业计划书如何编写
2014/02/06 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
2014年党支部承诺书
2014/05/30 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
励志演讲稿大全
2014/08/21 职场文书
演讲开场白台词大全
2015/05/29 职场文书
2015年国庆节寄语
2015/08/17 职场文书
学习经验交流会总结
2015/11/02 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书