使用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打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 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
PHP操作MySQL事务实例
2014/11/05 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python实现超市商品销售管理系统
2019/10/25 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
社区网格化管理实施方案
2014/03/21 职场文书
工地安全质量标语
2014/06/07 职场文书
2014年终个人工作总结
2014/11/07 职场文书
通知书大全
2015/04/27 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书