使用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 相关文章推荐
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 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使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
图片自动更新(说明)
2006/10/02 Javascript
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
Python模块的加载讲解
2019/01/15 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
公司联欢晚会主持词
2014/03/22 职场文书
学校党员对照检查材料
2014/08/28 职场文书
创先争优个人承诺书
2014/08/30 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
实习单位推荐信
2015/03/27 职场文书
经营目标责任书
2015/05/08 职场文书
经费申请报告
2015/05/15 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python