.NET下实现数字和字符相混合的验证码实例
经常在论坛里看到有问怎么实现验证码的帖子,其实关于验证码的文章在csdn,dev-club等网站上都有很多,但是很多文章只讲诉了如何输出一个随机生成数字或字符的图象,当然了,这个是验证码的核心了,但是对很多asp.net的初学者来说,怎么使用它生成的图象又成了一个问题(论坛有不少问这个的),这也是我写本文的一个原因.
言归正传,关于验证码的原理,我就不多说了,大家可以参见其他文章,文末附有完整的实例代码,里面有详细的注释,你可以跳过解说文字,直接使用
首先,我要简要说说session和viewstate的用法,因为后面会用到它
把数据存储在session中:session("key")="test"
从session取值:dim testvalue as string=session("key")
类似的:
把数据存储在viewstate中:viewstate("key")="test"
从viewstate中取值:dim testvalue as string=viewstate("key")
关于viewstate的更详细的资料,你可以参看msdn的<<asp.net viewstate 初探>>一文
百闻不如一见,有时代码本身就比任何解说更有表现力,所以在此就不对代码解说太多了,本文实现的验证码需要用到两个文件:
gif.aspx 该文件用于生成验证码
validatecode.aspx 该文件用来测试验证码(即如何使用)
下面给出gif.aspx的完整代码:
[/code]
<%@ import namespace="system"%>
<%@ import namespace="system.io"%>
<%@ import namespace="system.drawing"%>
<%@ import namespace="system.drawing.imaging"%>
<script language="vb" runat="server">
sub page_load(sender as object,e as eventargs)
'rndnum是一个自定义函数
dim vnum as string=rndnum(4)
session("vnum")=vnum
validatecode(vnum)
end sub
'生成图象验证码函数
sub validatecode(vnum)
dim img as system.drawing.bitmap
dim g as graphics
dim ms as memorystream
dim gheight as integer=int(len(vnum)*11.5)
'gheight为图片宽度,根据字符长度自动更改图片宽度
img=new bitmap(gheight,20)
g=graphics.fromimage(img)
g.drawstring(vnum,(new font("arial",10)),(new solidbrush(color.blue)),3,3)'在矩形内绘制字串（字串，字体，画笔颜色，左上x.左上y）
ms=new memorystream()
img.save(ms,imageformat.png)
response.clearcontent() '需要输出图象信息 要修改http头
response.contenttype="image/png"
response.binarywrite(ms.toarray())
g.dispose()
img.dispose()
response.end()
end sub
'--------------------------------------------
'函数名称:rndnum
'函数参数:vcodenum--设定返回随机字符串的位数
'函数功能:产生数字和字符混合的随机字符串
function rndnum(vcodenum)
dim vchar as string="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,w,x,y,z"
dim vcarray() as string=split(vchar,",") '将字符串生成数组
dim vnum as string=""
dim i as byte
for i=1 to vcodenum
randomize
vnum=vnum & vcarray(int(35*rnd)) '数组一般从0开始读取，所以这里为35*rnd
next
return vnum
end function
</script>
[/code]
那么又应该如何使用该文件生成的图象验证码,看这句代码:
<asp:image id="image1" runat="server" imageurl="gif.aspx" />
这就是用来显示验证码的image控件,你可以把它放在任何你喜欢的地方,下面的给出详细的使用代码,你把它保存为validatecode.aspx,并把它和gif.aspx放在同一目录下,在浏览器中打开validatecode.aspx,就可以测试它的效果了:
<script language="vb" runat="server">
sub page_load(sender as object,e as eventargs)
dim vnum as string=session("vnum")
session.abandon()
viewstate("vnum")=vnum
end sub
'下面的事件代码是用来测试验证码,可以根据需要更改
sub btnsubmit_click(sender as object,e as eventargs)
'判断输入的验证码与所给是否相同
if txtvalidatecode.text=cstr(viewstate("vnum")) then
lblshow.text="<font color='red'>提示:验证通过</font>"
else
lblshow.text="所填写的验证码与所给的不符"
end if
end sub
</script>
<html>
<body>
<form runat="server">
<div align="center">
<table width="750">
<!--dwlayouttable-->
<tr>
<td width="256" height="46"> </td>
<td width="9"> </td>
<td width="88"> </td>
<td width="87"> </td>
<td width="100"> </td>
<td width="68"> </td>
<td width="97"> </td>
</tr>
<tr>
<td height="21"></td>
<td></td>
<td colspan="3" valign="top"><asp:label id="lblshow" runat="server"></asp:label></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="14"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="21"> </td>
<td colspan="2" valign="middle">验证码:</td>
<td valign="top"><asp:image id="image1" runat="server" imageurl="gif.aspx" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="20"> </td>
<td colspan="2" valign="top">输入验证码:</td>
<td valign="top"><asp:textbox id="txtvalidatecode" runat="server" textmode="singleline" /></td>
<td colspan="2" valign="middle"><font color="#ff0000" size="2">*注意:区分大小写</font></td>
<td> </td>
</tr>
<tr>
<td height="25"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="19"> </td>
<td> </td>
<td> </td>
<td valign="top"><asp:button id="btnsubmit" runat="server" text="比较" onclick="btnsubmit_click" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</form>
</body>
</html>
对该文的评论
///
/// 将校验码生成图片
///
/// 校验码字符串
private void validatecode(string vnum)
{
int gheight=(int)(vnum.length * 11.5);
//gheight为图片宽度,根据字符长度自动更改图片宽度
system.drawing.bitmap img = new system.drawing.bitmap(gheight,20);
graphics g = graphics.fromimage(img);
g.drawstring(vnum,new system.drawing.font("arial",10),new system.drawing.solidbrush(color.red),3,3); //在矩形内绘制字串（字串，字体，画笔颜色，左上x.左上y）
system.io.memorystream ms=new system.io.memorystream();
img.save(ms,system.drawing.imaging.imageformat.png);
response.clearcontent(); //需要输出图象信息 要修改http头
response.contenttype="image/png";
response.binarywrite(ms.toarray());
g.dispose();
img.dispose();
response.end();
}
///
/// 生成验证码
///
/// 校验码长度
/// 返回校验码
private string generatecheckcode(int codelength)
{
string vchar="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,w,x,y,z";
string[]vcarray=vchar.split(new char[]{','}); //将字符串生成数组
string vnum ="";
for(byte i=1;i<=codelength;i++)
{
random ro=new random();
vnum+=vcarray[(int)(35*ro.nextdouble())]; //数组一般从0开始读取，所以这里为35*rnd
}
return vnum;
}