javaScript实现动态取得不同的验证码



一般我们登录系统、应用或是网站的时候，除了需要输入用户名和密码之外，有些还需要输入验证码，就像刚刚登陆的这个网站一样：

                                              

验证码那么简单为什么还需要手动输入呢？只要是认得10个数字和26个英文字母的人都可以正确输入，当然也有图片和中文的验证码。就像12306火车票网上订票系统一样，每次登陆都需要进行图文验证。百度百科中对其定义是：验证码（CAPTCHA）是“Completely Automated Public Turingtest to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试）的缩写，是一种区分用户是计算机还是人的公共全自动程序。可以知道这是一个很智能的东西，可以防止：恶意破解密码、刷票、论坛灌水等，所以现在可以理解12306网上订票系统的图文验证怎么那么复杂了，一般登陆的话总得看半天才知道那字、那图是什么。接下来看看.net中是怎么三步简单实现验证码登陆，注：主要是根据牛腩老师介绍的新闻发布系统进行实践的。

       一：新建一个“handler”文件夹，用来存放“一般处理程序”——WaterMark.ashx

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(70, 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 = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";        char[] chastr = str.ToCharArray();                string code = "";        Random rd = new Random();        int i;        for (i = 0; i < num; i++)        {             code += str.Substring(rd.Next(0, str.Length), 1);        }        return code;    }     public bool IsReusable    {        get        {            return false;        }    }}

     二、界面上的验证码用img来查看

   

 img中的字符串用WaterMark.ashx产生的随机字符串，也就是<img src="handler/WaterMark.ashx" id="vimg"alt="" onclick ="changeCode()"/>

  ps:img的路径一定要注意

        要实现点击img验证码可以实时切换，可以使用javaScript来实现，比较简单，可以直接嵌套在界面上的代码里：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">     <script language ="javascript" type ="text/javascript" >        function changeCode() {            var imgNode = document.getElementById("vimg");            imgNode.src = "handler/WaterMark.ashx?t=" + (new Date()).valueOf();}    </script></asp:Content>

        最后就可以实现单击切换验证码的功能啦，效果显示：