使用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 相关文章推荐
splice slice区别
Oct 09 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 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中创建并处理图象
2006/10/09 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
javascript每日必学之继承
2016/02/23 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
ES6中let 和 const 的新特性
2018/09/03 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python读取注册表中值的方法
2013/04/08 Python
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
python Tornado框架的使用示例
2020/10/19 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
建筑学推荐信
2013/11/03 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
技校毕业生自荐信
2014/06/03 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript