以前看到别人生成的图片验证码,总有一种高大上的感觉,最近试了下,发觉其实也不难,很简单的一个小功能。不过这里我只能是生成数字,至于我们经常见的字母、汉字什么的还不知道怎么实现,有待进一步研究。
首先看前台的代码,这里我用webForm中的aspx页面:
<asp:Label ID="Label1" runat="server" Text="验证码:"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><img src="ValidateCode.ashx" οnclick="this.src='ValidateCode.ashx?'+new Date()"/>
<br/>
<asp:Button ID="Button1" runat="server" Text="验证" OnClick="Button1_Click" />
这里,只是用了一个Label,一个TextBox,一个Image和一个Button按钮。TextBox用来输入显示的验证码,Image用来显示验证码,点击Button按钮对输入的验证码正确与否进行验证。这里要注意的是img控件中它的链接地址是一个一般处理程序,我们将在这个一般处理程序中生成验证码;它还有一个onclick事件,在onclick事件中设置它的链接地址,设置链接地址的同时加上一个 new Date(); 这样就可以使它点击时,每隔一秒产生一个新的验证码。
然后我们再看一般处理程序ValidateCode.ashx中是如何生成这个验证码的:
context.Response.ContentType = "image/jpeg";//输出类型设置为image/jpeg
using(Bitmap bitmap = new Bitmap(60,30)) //大小设置为宽60px,高30px
{
using (Graphics g = Graphics.FromImage(bitmap) )
{
Random random = new Random(); //生成一个随机数
string strCode = random.Next(1000, 9999).ToString(); //把这个随机数设置为四位
context.Session["Code"] = strCode; //把生成的验证码存在Session中,等到验证的时候再使用
g.DrawString(strCode,new Font("楷体",12),Brushes.Red,20,10); //设置验证码的字体及大小以及颜色
}
bitmap.Save(context.Response.OutputStream,System.Drawing.Imaging.ImageFormat.Jpeg);
}
最后,当输入验证码后,点击Button按钮,判断输入到文本框中的值与Session中存的是否相同:
protected void Button1_Click(object sender, EventArgs e)
{
if (Session["Code"].ToString() == TextBox1.Text)//判断文本框的值与Session中存的值是否相同
{
Response.Write("验证成功!");//相同则验证成功
}
else
{
Response.Write("验证错误!");//不同则验证错误
}
}
界面如下图所示,有点丑,凑合着看吧!