教你制作简单的验证码

每次登录CSDN博客都需要输入验证码，有时候明明看着写对了，却是经常显示验证码输入错误。想着前一时间段刚学了如何生成和使用验证码，加之最近正在学习JS，所以在此总结一下验证码的生成和使用，增加常用代码的积累，借鉴了牛腩的新闻发布系统。

生成验证码代码：

<%@ WebHandler Language="C#" Class="WaterMark" %> using System; using System.Web; using System.Drawing; using System.Drawing.Drawing2D; using System.Web.SessionState; public class WaterMark : IHttpHandler, IRequiresSessionState // 要使用session必须实现该接口,记得要导入System.Web.SessionState命名空间 { public void ProcessRequest(HttpContext context) { string checkCode = GenCode(5); // 产生5位随机字符，可更改 context.Session["Code"] = checkCode; //将字符串保存到Session中，以便需要时进行验证 System.Drawing.Bitmap image = new System.Drawing.Bitmap(120, 22);//定义验证码图片的宽度和高度 Graphics g = Graphics.FromImage(image); try { //生成随机生成器 Random random = new Random(); //清空图片背景色 g.Clear(Color.White); // 画图片的背景噪音线 int i; for (i = 0; i < 25; i++) { int x1 = random.Next(image.Width); int x2 = random.Next(image.Width); int y1 = random.Next(image.Height); int y2 = random.Next(image.Height); g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2); } Font font = new System.Drawing.Font("Arial", 12, (System.Drawing.FontStyle.Bold)); System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.DarkRed, 1.2F, true); g.DrawString(checkCode, font, brush, 2, 2); //画图片的前景噪音点 g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1); System.IO.MemoryStream ms = new System.IO.MemoryStream(); image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif); context.Response.ClearContent(); context.Response.ContentType = "image/Gif"; context.Response.BinaryWrite(ms.ToArray()); } finally { g.Dispose(); image.Dispose(); } } /// <summary> /// 产生随机字符串 /// </summary> /// <param name="num">随机出几个字符</param> /// <returns>随机出的字符串</returns> private string GenCode(int num) { string str = "廊坊师范学院提高班第八期李达";//图片上出现的文字为这些之一，可重复 char[] chastr = str.ToCharArray(); // string[] source ={ "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", "V", "W", "X", "Y", "Z", "#", "$", "%", "&", "@" }; string code = ""; Random rd = new Random(); int i; for (i = 0; i < num; i++) { //code += source[rd.Next(0, source.Length)]; code += str.Substring(rd.Next(0, str.Length), 1); } return code; } public bool IsReusable { get { return false; } } }
登录界面： <p >验证码：<img src="../handler/WaterMark.ashx" id="vimg" alt="" onclick="changeCode()"/> 使用 JS 避免浏览器缓存问题： <script language="javascript" type="text/javascript"> function changeCode() { var imgNode = document.getElementById("vimg"); imgNode.src = "../handler/WaterMark.ashx?t=" + (new Date()).valueOf(); // 这里加个时间的参数是为了防止浏览器缓存的问题 } </script> 登录界面后台代码： // 判断验证码是否输入正确 string code = txtCode.Text.Trim().ToUpper(); string rightCode = Session["Code"].ToString(); if (code != rightCode) { Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('验证码输入错误！');</script>"); return; } 运行界面：


简单介绍一下原理。首先是生成验证图片，在图片上添加线和点等视觉噪音，在图片上添加生成的字符，生成的验证码保存在session["code"]；为了避免缓存问题，给验证码添加时间标记；使用时判断输入的字符与验证码字符是否相同即可。