基于Layui + .net mvc登录界面验证码

html

<form class="layui-form" role="form" method="post">
    <div>
        <table style="width:100%" align="center">
            <tr>
                <td style="padding-bottom:20px;">
                    <input type="text" name="code" id="code" required lay-verify="required" style="border-radius:5px;" placeholder="验证码" class="layui-input">
                </td>
                <td style="padding-bottom:20px;padding-left:5px;cursor:pointer;width:90px;">
                    <img id="checkloing" src="/Login/VCode" title="看不清，换一张"
                         style="border: 1px solid #EEEEEE; border-radius: 5px;" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button id="loginBtn" class="layui-btn layui-btn-lg layui-btn-normal" style="width: 98%; background-color: #00BFC1;" lay-submit lay-filter="loginBtn">立即登录</button>
                </td>
            </tr>
        </table>
    </div>
</form>

js

layui.use('form', function () {
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.jquery
    //layui表单提交方法
    form.on('submit(loginBtn)', function (data) {
        var user = data.field;
        $.post('/Login/Login', user, function (res) {
            if ("success" == res)//如果成功则跳转到指定页面
                location.href = "/Home/";
            //location.href = "/pageChange/pageChange";
            else {//失败则弹出失败提示
                layer.msg(res, {
                    offset: 1,
                    shift: 0,
                    area: ['100%', '50px'],
                    time: 3000,
                    scrollbar: false,
                }, function () {//在登录失败时刷新验证码
                    var str = "?" + Math.random();//加上这句话可以解决验证码不刷新
                    $("#checkloing").attr("src", "/Login/VCode" + str);
                });
            }
        });
        return false;
    });
});
//验证码点击事件
$(document).ready(function (e) {
    $("#checkloing").click(function () {
        var str = "?" + Math.random();
        $(this).attr("src", "/Login/VCode" + str);
    })
});

Controllers

using COMMON;
using System;
using System.Web.Mvc;

namespace SFMVC3._0.Controllers
{
    public class LoginController : Controller
    {
/// <summary>
        /// 登录
        /// </summary>
        /// <param name="code"></param>
        /// <returns></returns>
        [HttpPost]
        public string Login(string code)
        {string str = Session["code"].ToString();
            str = str.ToLower();
            code = code.ToLower();
            if (str != vccode)
            {
                return "验证码错误";
            }

            return "success";
        }
        /// <summary>
        /// 验证码点击事件 
        /// </summary>
        /// <returns></returns>
        public ActionResult VCode()
        {
            limitCodeHelper vcode = new limitCodeHelper();
            string codeStr = vcode.GetRandomCode();
            if (!string.IsNullOrEmpty(codeStr))
            {
                byte[] arrImg = vcode.GetVCode(codeStr);
                Session["code"] = codeStr;
                return File(arrImg, "image/gif");
            }
            else
            {
                return RedirectToAction("/Login/VCode?rand=" + Guid.NewGuid().ToString().Substring(1, 10), "image/jpeg");
            }
        }
    }
}

Dal

using System;
using System.Drawing;


namespace COMMON
{
//验证码绘制
    public class limitCodeHelper
    {
        private static Color BackColor = Color.White;
        private static int Width = 100;
        private static int Height = 36;
        private int letterWidth = 24;//单个字体的宽度范围
        private Random _random;
        // private string _code;
        private int _brushNameIndex;
        private string[] fonts = { "Arial", "Georgia" };

        public byte[] GetVCode(string codeStr)
        {
            _random = new Random();
            Bitmap img = new Bitmap(Width, Height);
               using( Graphics g = Graphics.FromImage(img)) { 
                Random random = new Random();
                //白色背景
                g.Clear(Color.White);
                //画图片的背景噪音线
                for (int i = 0; i < 10; i++)
                {
                    int x1 = random.Next(img.Width);
                    int x2 = random.Next(img.Width);
                    int y1 = random.Next(img.Height);
                    int y2 = random.Next(img.Height);

                    g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);
                }
                //随机字体和颜色的验证码字符
                for (int int_index = 0; int_index < codeStr.Length; int_index++)
                {
                    string str_char = codeStr.Substring(int_index, 1);
                    Brush newBrush = new SolidBrush(GetRandomColor());
                    Point thePos = new Point(int_index * letterWidth + 1 + _random.Next(3), 1 + _random.Next(3));
                    g.DrawString(str_char, new Font(GetFont().FontFamily, 18, FontStyle.Bold), newBrush, thePos);
                }

                //灰色边框
                //g.DrawRectangle(new Pen(Color.LightGray, 1), 0, 0, Width - 1, (Height - 1));
                //图片扭曲
                img = TwistImage(img, true, 3, 4);
                //将生成的图片发回客户端
                g.DrawRectangle(Pens.DarkGray, 0, 0, Width - 1, Height - 1);//绘画边框
                using (System.IO.MemoryStream ms = new System.IO.MemoryStream())
                {
                    //将图片 保存到内存流中
                    img.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
                    //将内存流 里的 数据  转成 byte 数组 返回
                    return ms.ToArray();
                }
            }

        }

        /// <summary>
        /// 绘画文字
        /// </summary>
        /// <param name="g"></param>
        private void Paint_Text(Graphics g, string code)
        {
            g.DrawString(code, GetFont(), GetBrush(), 3, 1);
        }

        /// <summary>
        /// 绘画文字噪音点
        /// </summary>
        /// <param name="g"></param>
        private void Paint_TextStain(Bitmap b)
        {
            string[] BrushName = new string[] {    "OliveDrab",
                                                  "ForestGreen",
                                                  "DarkCyan",
                                                  "LightSlateGray",
                                                  "RoyalBlue",
                                                  "SlateBlue",
                                                  "DarkViolet",
                                                  "MediumVioletRed",
                                                  "IndianRed",
                                                  "Firebrick",
                                                  "Chocolate",
                                                  "Peru",
                                                  " enrod"
                                             };

            for (int n = 0; n < 30; n++)
            {
                int x = _random.Next(Width);
                int y = _random.Next(Height);
                b.SetPixel(x, y, Color.FromName(BrushName[_brushNameIndex]));

            }

        }
        /// <summary>
        /// 随机取一个字体
        /// </summary>
        /// <returns></returns>
        private Font GetFont()
        {
            string[] FontItems = new string[]{   "Arial", 
                                                  "Helvetica", 
                                                  "Geneva", 
                                                  "sans-serif", 
                                                  "Verdana"
                                              };

            int fontIndex = _random.Next(0, FontItems.Length);
            FontStyle fontStyle = GetFontStyle(_random.Next(0, 2));
            return new Font(FontItems[fontIndex], 12, fontStyle);
        }
        /**/
        /**/
        /**/
        /// <summary>
        /// 随机取一个笔刷
        /// </summary>
        /// <returns></returns>
        private Brush GetBrush()
        {
            Brush[] BrushItems = new Brush[]{     Brushes.OliveDrab,
                                                  Brushes.ForestGreen,
                                                  Brushes.DarkCyan,
                                                  Brushes.LightSlateGray,
                                                  Brushes.RoyalBlue,
                                                  Brushes.SlateBlue,
                                                  Brushes.DarkViolet,
                                                  Brushes.MediumVioletRed,
                                                  Brushes.IndianRed,
                                                  Brushes.Firebrick,
                                                  Brushes.Chocolate,
                                                  Brushes.Peru,
                                                  Brushes.Goldenrod
                                            };

            int brushIndex = _random.Next(0, BrushItems.Length);
            _brushNameIndex = brushIndex;
            return BrushItems[brushIndex];
        }
        /// <summary>
        /// 绘画背景颜色
        /// </summary>
        /// <param name="g"></param>
        private void Paint_Background(Graphics g)
        {
            g.Clear(BackColor);
        }
        /**/
        /**/
        /**/
        /// <summary>
        /// 取一个字体的样式
        /// </summary>
        /// <param name="index"></param>
        /// <returns></returns>
        private FontStyle GetFontStyle(int index)
        {
            switch (index)
            {
                case 0:
                    return FontStyle.Bold;
                case 1:
                    return FontStyle.Italic;
                default:
                    return FontStyle.Regular;
            }
        }

        /// <summary>
        /// 取得一个 4 位的随机码
        /// </summary>
        /// <returns></returns>
        public string GetRandomCode()
        {
            return Guid.NewGuid().ToString().Substring(0, 4);
        }
        /// <summary>
        /// 随机颜色
        /// </summary>
        /// <returns></returns>
        public Color GetRandomColor()
        {
            Random RandomNum_First = new Random((int)DateTime.Now.Ticks);
            System.Threading.Thread.Sleep(RandomNum_First.Next(50));
            Random RandomNum_Sencond = new Random((int)DateTime.Now.Ticks);
            int int_Red = RandomNum_First.Next(210);
            int int_Green = RandomNum_Sencond.Next(180);
            int int_Blue = (int_Red + int_Green > 300) ? 0 : 400 - int_Red - int_Green;
            int_Blue = (int_Blue > 255) ? 255 : int_Blue;
            return Color.FromArgb(int_Red, int_Green, int_Blue);// 5+1+a+s+p+x
        }
        /// <summary>
        /// 扭曲图片
        /// </summary>
        /// <param name="srcBmp"></param>
        /// <param name="bXDir"></param>
        /// <param name="dMultValue"></param>
        /// <param name="dPhase"></param>
        /// <returns></returns>
        public System.Drawing.Bitmap TwistImage(Bitmap srcBmp, bool bXDir, double dMultValue, double dPhase)
        {
            double PI = 6.283185307179586476925286766559;
            Bitmap destBmp = new Bitmap(srcBmp.Width, srcBmp.Height);
            Graphics graph = Graphics.FromImage(destBmp);
            graph.FillRectangle(new SolidBrush(Color.White), 0, 0, destBmp.Width, destBmp.Height);
            graph.Dispose();
            double dBaseAxisLen = bXDir ? (double)destBmp.Height : (double)destBmp.Width;
            for (int i = 0; i < destBmp.Width; i++)
            {
                for (int j = 0; j < destBmp.Height; j++)
                {
                    double dx = 0;
                    dx = bXDir ? (PI * (double)j) / dBaseAxisLen : (PI * (double)i) / dBaseAxisLen;
                    dx += dPhase;
                    double dy = Math.Sin(dx);
                    int nOldX = 0, nOldY = 0;
                    nOldX = bXDir ? i + (int)(dy * dMultValue) : i;
                    nOldY = bXDir ? j : j + (int)(dy * dMultValue);

                    Color color = srcBmp.GetPixel(i, j);
                    if (nOldX >= 0 && nOldX < destBmp.Width
                     && nOldY >= 0 && nOldY < destBmp.Height)
                    {
                        destBmp.SetPixel(nOldX, nOldY, color);
                    }
                }
            }
            srcBmp.Dispose();
            return destBmp;
        }
    }
}