如何设计验证码的实现

            <input id="txtUserName" type="text" name="username" class="username" placeholder="请输入您的用户名！">            <input id="txtPassword" type="password" name="password" class="password" placeholder="请输入您的用户密码！">            <input type="Captcha" class="Captcha" name="Captcha" placeholder="请输入验证码！" />            <img src="/Backstage/Home/CheckCode?ID=1" id="imgCode" class="check" alt="单击可刷新" onclick="ChangeCode();" />            @*<a href="javascript:void(0)" onclick="ClickRemoveChangeCode();return false;">看不清</a>*@            <button id="btnLogin" type="submit" class="submit_button">登录</button>            <div class="error"><span>+</span></div>

KenceryValidateCode.cs

KenceryValidateCode.csusing System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Drawing;using System.Drawing.Drawing2D;using System.IO;using System.Drawing.Imaging;namespace RBW.Common{    public class KenceryValidateCode    {        /// <summary>        /// 验证码的最大长度        /// </summary>        public int MaxLength        {            get { return 10; }        }        /// <summary>        /// 验证码的最小长度        /// </summary>        public int MinLength        {            get { return 1; }        }        /// <summary>        /// 生成验证码        /// </summary>        /// <param name="length">指定验证码的长度</param>        /// <returns></returns>        public string CreateValidateCode(int length)        {            int[] randMembers = new int[length];            int[] validateNums = new int[length];            string validateNumberStr = "";            //生成起始序列值            int seekSeek = unchecked((int)DateTime.Now.Ticks);            Random seekRand = new Random(seekSeek);            int beginSeek = (int)seekRand.Next(0, Int32.MaxValue - length * 10000);            int[] seeks = new int[length];            for (int i = 0; i < length; i++)            {                beginSeek += 10000;                seeks[i] = beginSeek;            }            //生成随机数字            for (int i = 0; i < length; i++)            {                Random rand = new Random(seeks[i]);                int pownum = 1 * (int)Math.Pow(10, length);                randMembers[i] = rand.Next(pownum, Int32.MaxValue);            }            //抽取随机数字            for (int i = 0; i < length; i++)            {                string numStr = randMembers[i].ToString();                int numLength = numStr.Length;                Random rand = new Random();                int numPosition = rand.Next(0, numLength - 1);                validateNums[i] = Int32.Parse(numStr.Substring(numPosition, 1));            }            //生成验证码            for (int i = 0; i < length; i++)            {                validateNumberStr += validateNums[i].ToString();            }            return validateNumberStr;        }        //C# MVC 升级版        /// <summary>        /// 创建验证码的图片        /// </summary>        /// <param name="containsPage">要输出到的page对象</param>        /// <param name="validateNum">验证码</param>        public byte[] CreateValidateGraphic(string validateCode)        {            Bitmap image = new Bitmap((int)Math.Ceiling(validateCode.Length * 16.0), 30);            Graphics g = Graphics.FromImage(image);            try            {                //生成随机生成器                Random random = new Random();                //清空图片背景色                g.Clear(Color.White);                //画图片的干扰线                for (int 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 Font("Arial", 16, (FontStyle.Bold | FontStyle.Italic));                LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height),                                                                    Color.Blue, Color.DarkRed, 1.2f, true);                g.DrawString(validateCode, font, brush, 3, 2);                //画图片的前景干扰点                for (int i = 0; i < 100; i++)                {                    int x = random.Next(image.Width);                    int y = random.Next(image.Height);                    image.SetPixel(x, y, Color.FromArgb(random.Next()));                }                //画图片的边框线                g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);                //保存图片数据                MemoryStream stream = new MemoryStream();                image.Save(stream, ImageFormat.Jpeg);                //输出图片流                return stream.ToArray();            }            finally            {                g.Dispose();                image.Dispose();            }        }        /// <summary>        /// 得到验证码图片的长度        /// </summary>        /// <param name="validateNumLength">验证码的长度</param>        /// <returns></returns>        public static int GetImageWidth(int validateNumLength)        {            return (int)(validateNumLength * 12.0);        }        /// <summary>        /// 得到验证码的高度        /// </summary>        /// <returns></returns>        public static double GetImageHeight()        {            return 22.5;        }    }}

(3)那么现在我们的验证码生成的类已经完成了，这时候我们根据<img src=http://www.mamicode.com/”/Login/CheckCode?ID=1”>所知，我们要到Login控制器下面去创建CheckCode方法来实现能够从View层读取验证码显示出来，那么必然在我们项目当中women就要用到刚才定义的获取验证码的类，那么这时候women就要添加LYZJ.UserLimitMVC.Common的引用，这时候在Login控制器下面的读取验证码的方法代码如下：

        /// <summary>        /// 验证码的实现        /// </summary>        /// <returns></returns>        public ActionResult CheckCode()        {            //首先实例化验证码的类            KenceryValidateCode validateCode = new KenceryValidateCode();            //生成验证码指定的长度            string code = validateCode.CreateValidateCode(4);            //将验证码赋值给Session变量            Session["ValidateCode"] = code;            Session.Timeout = 30;            //创建验证码的图片            byte[] bytes = validateCode.CreateValidateGraphic(code);            //最后将验证码返回            return File(bytes, @"image/jpeg");        }

(4)view视图页面

Login.cshtml

Login.cshtml<script type="text/javascript">    var LoginAndReg;    $(function () {        //登录        function login() {            //$("#btnLogin").click(function () {            //console.info($("#txtPassword").val());            var user = $("#txtUserName").val();            var pass = $("#txtPassword").val();            var code = $(".Captcha").val();            //用户名提醒            if (user == null || user == undefined || user == "") {                ymPrompt.alert({                    title: "提示",                    message: "请输入用户名！",                    maskAlphaColor: "#AF0501"                });                return false;            }            //密码提醒            if (pass == null || pass == undefined || pass == "") {                ymPrompt.alert({                    title: "提示",                    message: "请输入密码！",                    maskAlphaColor: "#AF0501"                });                return false;            }            //验证码提醒            if (code == null || code == undefined || code == "") {                ymPrompt.alert({                    title: "提示",                    message: "请输入验证码！",                    maskAlphaColor: "#AF0501"                });                return false;            }            $.post(                "/Backstage/Home/CheckLogin",                { txtUsername: user, txtPass: hex_md5(pass), code: code },                            function (e) {                                //console.info(e.rows.ID);                                //alert(e.ID);                                if (e.rows.ID != null) {                                    ymPrompt.succeedInfo({                                        title: "提示",                                        message: "登录成功",                                        maskAlphaColor: "#12A125",                                                                            });                                    window.location.href = http://www.mamicode.com/"/Backstage/Home/index";                                } else {                                    ymPrompt.errorInfo({                                        title: "错误",                                        message: e.message,                                        maskAlphaColor: ‘#AF0501‘,                                        handler: function () {                                            $(function () {                                                $("#txtUserName").attr("value", "");                                                $(".Captcha").attr("value", "");                                            })                                                                                         //自动刷新                                            window.location.reload();                                                                                    }                                    });                                 }                            }, "json"                        );        }        function getsize() {            var windowHeight = 0;            var widowWidth = 0;            if (typeof (window.innerHeight) == ‘number‘) {                windowHeight = window.innerHeight;                widowWidth = window.innerWidth;            }            else {                if (document.documentElement && document.documentElement.clientHeight) {                    windowHeight = document.documentElement.clientHeight;                    widowWidth = document.documentElement.clientWidth;                }                else {                    if (document.body && document.body.clientHeight) {                        windowHeight = document.body.clientHeight;                        widowWidth = document.body.clientWidth;                    }                }            }            return { width: widowWidth, height: windowHeight };        }        $(‘#btnLogin‘).click(function () {            login();            //ChangeCode();            return false;        });        //响应键盘的回车事件        //$(this).keydown(function (event) {        //    if (event.keyCode == 13) {        //        event.returnValue = false;        //        event.cancel = true;        //        return login();        //    }        //});        //$(‘#txtorgcode‘).combobox({        //    data:orgdata,valueField:‘id‘,textField:‘text‘,panelHeight:‘300‘,width:160        //})    })    //单击重新改变验证码    function ChangeCode() {        //首先我们获取到验证码的路径        var code = $("#imgCode").attr("src");        //alert(code)        //然后重新给验证码的路径赋值        $("#imgCode").attr("src", code + "1");        //alert($("#imgCode").attr("src", code + "1"))    }</script><body>    <div class="page-container">        <h1>XXXXXX</h1>        <form action="" method="post">            <input id="txtUserName" type="text" name="username" class="username" placeholder="请输入您的用户名！">            <input id="txtPassword" type="password" name="password" class="password" placeholder="请输入您的用户密码！">            <input type="Captcha" class="Captcha" name="Captcha" placeholder="请输入验证码！" />            <img src="/Backstage/Home/CheckCode?ID=1" id="imgCode" class="check" alt="单击可刷新" onclick="ChangeCode();" />            @*<a href="javascript:void(0)" onclick="ClickRemoveChangeCode();return false;">看不清</a>*@            <button id="btnLogin" type="submit" class="submit_button">登录</button>            <div class="error"><span>+</span></div>        </form>        @*            <div class="connect">                <p>快捷</p>            </div>*@    </div></body><div style="text-align: center;"></div>

验证码