如何创建4位数字验证码图片（ASP.NET MVC2环境下）

基于mvc2架构下的验证码由一个controll中的action负责管理view上

的一个动作，这是在controll中创建验证码图片的过程。

 

public FileResult ConfirmCode() { //生成4位随机数，并将其转为string型，传入session，4位数字由随 机数从1000-9999中提取。 string ConfirmCode = string.Empty; Random rand = new Random(); ConfirmCode = rand.Next(1000, 9999).ToString(); Session["QuickChannelConfirmCode"] = ConfirmCode;

//大自然中的任何颜色都可以由三基色红绿蓝组合而成，三色的颜色的变

化都可以量化为（0-255）的数值，因此只要控制红、绿、蓝三色的取值

便可以随机出验证码的颜色
//于是我首先先实例化了两个随机数的对象rand1、rand2,然后通过随机

数中Next的方法在（0-255）中提取数字
//为了让随机色都是鲜明的颜色，我们控制rgb中蓝色，由于蓝色在取（145-255）的

时候，颜色为亮色。
//这里使用了两个逻辑表达式，blue1的取值逻辑，假设（red的值+green大

于400，blue1的值则取为0，否则blue1的值为（400-red-green））
//由于上面的逻辑可能导致blue1的值大于255，为了防止这一情况的出

现，再设一个逻辑表达式，假设大于255时，蓝色的值取为255。
//最后通过Color类的FromArgb方法，生成一个随机色。

Random rand1 = new Random(); Random rand2 = new Random(); int red = rand1.Next(256); int green = rand2.Next(256); int blue1 = (red + green > 400) ? 0 : 400 - red - green; int blue2 = (blue1 > 255) ? 255 : blue1; Color col = Color.FromArgb(red,green,blue2);

 

    生成了数字与颜色后，我们需要将这些元素组合并绘制成图片。从绘图的角度

上来说，一张图片的生成要有可绘画区域以及包裹它的框架。
    于是首先我们实例化Bitmap类，生成一个宽imagewidth,长20的可绘画区域bmp。
将其封装至框架g中，这样g中就存在了一个可绘画区域(bmp)。
g.Clear(Color.White)将可绘画区域内所有的颜色清除，并填充白色。
类似于PS的起始状态，此时我们对g进行绘画，绘制一个矩形（由于绘制矩形需要告

诉绘图面板绘图的工具、起始坐标、结束坐标）,这里使用了pen，从

（0,0）位置绘制到（imagewidth-1,19）这个坐标.
绘制完矩形后，绘制矩形内的内容，由于绘制的是string类型，因此需要准备四大参

数1.绘制的内容（上面生成的数字）,2.字体，3.用什么“工具”画
4.从哪开始画(起始位置),综合上面的四点，我们便可以使用DrawString方法绘制验

证码了。

int imageWidth = ConfirmCode.Length * 13; Bitmap bmp = new Bitmap(imageWidth,20); Graphics g = Graphics.FromImage(bmp); g.Clear(Color.White); g.DrawRectangle(new Pen(Color.LightGray,1),0,0,imageWidth-1,19); Font font = new Font("Arial", 16); Brush brush = new SolidBrush(col);//col 为上文随机出的颜色 Point po = new Point(0, 0); g.DrawString(ConfirmCode,font,brush,po);  

//生成后的图片需要输出。为了输出，首先我们要先要告诉游览器图片输出的类型（由

于游览器只识别MIME码），为了避免乱码，指定输出类型为image/jpeg
//图片以流的方式输出至游览器，因此需要首先将图片bmp存入内存的流ms，并格式化

其图片类型为jpeg
//设置内存流ms的查找起点位置在0这个位置
//最后以文件流的形式返回至视图.

Response.ContentType = "image/jpeg"; MemoryStream ms = new MemoryStream(); bmp.Save(ms, ImageFormat.Jpeg); ms.Seek(0, SeekOrigin.Begin); return new FileStreamResult(ms, "image/jpeg"); }

 

 

制作完了controll中的逻辑，我们回到视图，先创建一个简单的页面（没有绑CSS），并

声明调用jquery。

 

 

 

  <form id="form1" method="post"> <label>姓名：</label> <input type="text" name="nameTextBox" id="nameTextBox" /><br /> <label>验证码：</label> <input type="text" name="textbox1" id="textbox1" /><br /> <label>Email</label> <input type="text" name="email" id="email" /> <img id="ConfirmImage" src="/Home/ConfirmCode" mce_src="Home/ConfirmCode" alt="验证码" /><br /> <span><a href="javascript:refreshPic()" mce_href="javascript:refreshPic()"> 看不清，换一张</a></span> <label><a href="../../Content/ohoopee2.jpg" mce_href="Content/ohoopee2.jpg" rel="bigPic">(点击放大)</a></label> <br /> <a href="javascript:check()" mce_href="javascript:check()">确认</a> </form>

 

在这个页面中，我们需要考虑几个问题。首先当两个textbox为空时，怎么办？

一般来讲，当出现这种情况的时候可以用js在页面层面进行判断。

于是我们写了一个validateAddress()的函数对当textbox中值为空的情况进行判断

并且，还要考虑正则表达式，防止用户的乱输字符的情形 。

function validateAddress() { if ($("#nameTextBox").val() == "") { alert("请输入姓名"); return; } if ($("#textbox1").val() == "") { alert("请输入验证码"); return; } if ($("#email").val() == "") { alert("请输入Email地址"); return; } if ($("#email").val() != "") { var reg = /^[a-z0-9]([a-z0-9]*[-_/.]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[/.][a-z]{2,3}([/.][a-z]{2})?$/i; if (!reg.test($("#email").val())) { alert("请输入正确的EMAIL地址"); return; } } $("#form1").submit(); }

 

第二个需要考虑的问题是验证码看不清时的更换，参考邮箱的“看不清”链接，我们

同样使用一个js，绑在这段文字上。

函数采用了局部刷新的做法，通过document的方法定位到img控件的src属性上

当点击时，执行服务端的action（“/Home/ConfirmCode”），使页面在正体不

刷新的情况下，局部刷新。

   function refreshPic() { document.getElementById("ConfirmImage").src = "/Home/ConfirmCode"; }

 

 

除此以外，对于验证码是否正确的判断。我们使用了url传值的方法，在服务器端进行判断。

函数的作用在于通过jquery中getscript的方法，将值通过url传递给服务端，

由服务端进行逻辑判断，最后通过服务端返回的给页面，由js根据返回结果给出

提示文字。

 

页面方法：

function check() { $.getScript("/Home/CheckCode?code=" + $("#textbox1").val(), function (j) { if (eval(j) == true) { validateAddress(); alert("验证通过"); } else { refreshPic(); alert("验证码错误！请检查"); } }) }

 

 

服务端逻辑：

注意当session为null以及为”“时的情况，不注意的话系统可能会报错 。

还有就是session使用后一定要有资源释放的设定，不然会造成资源的

紧张，影响网站的运行的效率。

 public ActionResult CheckCode() { string quickChannalConfirmCode = Request.QueryString["code"].ToString(); if (Session["QuickChannelConfirmCode"] == null || "".Equals(Session["QuickChannelConfirmCode"].ToString())) { return Content("false"); } string yanzheng=Session["QuickChannelConfirmCode"].ToString(); Session.Remove("QuickChannelConfirmCode"); if (quickChannalConfirmCode ==yanzheng) { return Content("true"); } else { return Content("false"); } }

 

由此一个简单的验证码功能便大功告成~~~~