在ASP.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的 <

1<asp.net viewstate="" 初探="">&gt; 一文   
2百闻不如一见,有时代码本身就比任何解说更有表现力,所以在此就不对代码解说太多了,本文实现的验证码需要用到两个文件:   
3gif.aspx 该文件用于生成验证码   
4ValidateCode.aspx 该文件用来测试验证码(即如何使用)   
5下面给出gif.aspx的完整代码:   

@ import namespace="System"

@ import namespace="System.io"

@ import namespace="System.Drawing"

@ import namespace="System.Drawing.Imaging"

  1<script language="vb" runat="server">   
  2Sub Page_Load(Sender as object,e as eventargs)   
  3'RndNum是一个自定义函数   
  4dim VNum as string=RndNum(4)   
  5Session("VNum")=VNum   
  6ValidateCode(VNum)   
  7End Sub   
  8'生成图象验证码函数   
  9Sub ValidateCode(VNum)   
 10Dim Img as System.Drawing.Bitmap   
 11Dim g as Graphics   
 12Dim ms as MemoryStream   
 13dim gheight as integer=Int(Len(VNum)*11.5)   
 14'gheight为图片宽度,根据字符长度自动更改图片宽度   
 15img=new BitMap(Gheight,20)   
 16g=Graphics.FromImage(img)   
 17g.DrawString(VNum,(New Font("Arial",10)),(New SolidBrush(color.blue)),3,3)'在矩形内绘制字串(字串,字体,画笔颜色,左上x.左上y)   
 18ms=New MemoryStream()   
 19img.Save(ms,ImageFormat.Png)   
 20Response.ClearContent() '需要输出图象信息 要修改HTTP头   
 21Response.ContentType="image/Png"   
 22Response.BinaryWrite(ms.ToArray())   
 23g.Dispose()   
 24img.Dispose()   
 25Response.End()   
 26End Sub   
 27'--------------------------------------------   
 28'函数名称:RndNum   
 29'函数参数:VcodeNum--设定返回随机字符串的位数   
 30'函数功能:产生数字和字符混合的随机字符串   
 31Function RndNum(VcodeNum)   
 32dim 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"   
 33dim VcArray() as string=split(Vchar,",") '将字符串生成数组   
 34dim VNum as string=""   
 35dim i as byte   
 36For i=1 to VcodeNum   
 37Randomize   
 38VNum=VNum & VcArray(Int(35*Rnd)) '数组一般从0开始读取,所以这里为35*Rnd   
 39Next   
 40Return VNum   
 41End Function   
 42</script>   
 43那么又应该如何使用该文件生成的图象验证码,看这句代码:   
 44<asp:image id="Image1" imageurl="gif.aspx" runat="server"></asp:image>   
 45这就是用来显示验证码的Image控件,你可以把它放在任何你喜欢的地方,下面的给出详细的使用代码,你把它保存为ValidateCode.aspx,并把它和gif.aspx放在同一目录下,在浏览器中打开ValidateCode.aspx,就可以测试它的效果了:   
 46<script language="vb" runat="Server">   
 47Sub Page_Load(Sender as object,e as eventargs)   
 48dim VNum as string=Session("VNum")   
 49Session.Abandon()   
 50ViewState("VNum")=VNum   
 51End Sub   
 52'下面的事件代码是用来测试验证码,可以根据需要更改   
 53Sub btnSubmit_click(sender as object,e as eventargs)   
 54'判断输入的验证码与所给是否相同   
 55If txtValidateCode.text=Cstr(ViewState("VNum")) then   
 56lblShow.text="<font color='red'>提示:验证通过</font>"   
 57Else   
 58lblShow.text="所填写的验证码与所给的不符"   
 59End If   
 60End Sub   
 61</script>
 62<html>
 63<body>
 64<form runat="server">
 65<div align="center">
 66<table width="750">
 67<!--DWLayoutTable-->
 68<tr>
 69<td height="46" width="256">  </td>
 70<td width="9"> </td>
 71<td width="88"> </td>
 72<td width="87"> </td>
 73<td width="100"> </td>
 74<td width="68"> </td>
 75<td width="97"> </td>
 76</tr>
 77<tr>
 78<td height="21"></td>
 79<td></td>
 80<td colspan="3" valign="top"><asp:label id="lblShow" runat="server"></asp:label></td>
 81<td> </td>
 82<td> </td>
 83</tr>
 84<tr>
 85<td height="14"></td>
 86<td></td>
 87<td></td>
 88<td></td>
 89<td></td>
 90<td></td>
 91<td></td>
 92</tr>
 93<tr>
 94<td height="21"> </td>
 95<td colspan="2" valign="middle">验证码:</td>
 96<td valign="top"><asp:image id="Image1" imageurl="gif.aspx" runat="server"></asp:image></td>
 97<td> </td>
 98<td> </td>
 99<td> </td>
100</tr>
101<tr>
102<td height="20"> </td>
103<td colspan="2" valign="top">输入验证码:</td>
104<td valign="top"><asp:textbox id="txtValidateCode" runat="server" textmode="SingleLine"></asp:textbox></td>
105<td colspan="2" valign="middle"><font color="#FF0000" size="2">*注意:区分大小写</font></td>
106<td> </td>
107</tr>
108<tr>
109<td height="25"> </td>
110<td> </td>
111<td> </td>
112<td> </td>
113<td> </td>
114<td> </td>
115<td> </td>
116</tr>
117<tr>
118<td height="19"> </td>
119<td> </td>
120<td> </td>
121<td valign="top"><asp:button id="btnSubmit" onclick="btnSubmit_click" runat="server" text="比较"></asp:button></td>
122<td> </td>
123<td> </td>
124<td> </td>
125</tr>
126</table>
127</div>
128</form>
129</body>
130</html></asp.net>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus