zoukankan      html  css  js  c++  java
  • MVC中验证码的生成

    在项目中验证码的生成通常是需要页面无刷新的,所以验证码图片实际是跟在某个input后面的img,通过控制该img来控制验证码显示的位置,例如:

    <div>
    <input id="testcode" type="text"/><img id="testimg" src="../Home/codeindex"/>
    <a href="javascript:freshimg()" style="font-size: 12px; color: Green;">看不清</a>
    </div>
    <div>
    <img id="imgtest" width="500px" height="600px" src="~/pp.png" style="display:none"/>
    </div>

    需要做到无刷新的切换图片

    function freshimg() {
    var randomnum = Math.random();
    var getimagecode = document.getElementById("testimg");
    getimagecode.src = "../Home/codeindex? " + randomnum;
    }

    验证输入的验证码是否正确

    $(document).ready(function () {
    var PerformSearch;
    $("#testcode").keyup(function () {
    var va = $(this).val();
    if (PerformSearch) clearTimeout(PerformSearch);
    PerformSearch=setTimeout(function () {
    $.ajax({
    type: "post",
    url: "../Home/CheckCode",
    data: { valdatecode: va },
    dataType: "text",
    success: function (data) {
    if (data == "true") {
    alert("验证码输入正确");
    document.getElementById("imgtest").style.display = "block";
    }
    else {
    alert("验证码输入错误");
    fresh();
    document.getElementById("imgtest").style.display = "none";
    }
    }
    });
    }, 1000)
    });
    });

    后台代码为

    public ActionResult codeindex()  //该段代码转载其他文档
    {
    #region 方法1:调用类方法
    //CreateValdateCode cc = new CreateValdateCode();
    //cc.GetValDateCode();
    //Session["code"] = cc.Code;
    //return View();
    #endregion

    #region 方法二
    string chkCode = string.Empty;
    //颜色列表,用于验证码、噪线、噪点
    Color[] color = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.Brown, Color.DarkBlue };
    //字体列表,用于验证码
    string[] font = { "Times New Roman", "MS Mincho", "Book Antiqua", "Gungsuh", "PMingLiU", "Impact" };
    //验证码的字符集,去掉了一些容易混淆的字符
    char[] character = { '2', '3', '4', '5', '6', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'W', 'X', 'Y','a','b','c' };
    Random rnd = new Random();
    //生成验证码字符串
    for (int i = 0; i < 4; i++)
    {
    chkCode += character[rnd.Next(character.Length)];
    }
    Session["code"] = chkCode;
    Bitmap bmp = new Bitmap(100, 40);
    Graphics g = Graphics.FromImage(bmp);
    g.Clear(Color.White);
    //画噪线
    for (int i = 0; i < 10; i++)
    {
    int x1 = rnd.Next(100);
    int y1 = rnd.Next(40);
    int x2 = rnd.Next(100);
    int y2 = rnd.Next(40);
    Color clr = color[rnd.Next(color.Length)];
    g.DrawLine(new Pen(clr), x1, y1, x2, y2);
    }
    //画验证码字符串
    for (int i = 0; i < chkCode.Length; i++)
    {
    string fnt = font[rnd.Next(font.Length)];
    Font ft = new Font(fnt, 18);
    Color clr = color[rnd.Next(color.Length)];
    g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr), (float)i * 18 + 8, (float)8);
    }
    //画噪点
    for (int i = 0; i < 100; i++)
    {
    int x = rnd.Next(bmp.Width);
    int y = rnd.Next(bmp.Height);
    Color clr = color[rnd.Next(color.Length)];
    bmp.SetPixel(x, y, clr);
    }
    Response.Buffer = true;
    Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds(0);
    Response.Expires = 0;
    Response.CacheControl = "no-cache";
    Response.AppendHeader("Pragma", "No-Cache");
    MemoryStream ms = new MemoryStream();
    try
    {
    bmp.Save(ms, ImageFormat.Png);
    Response.ClearContent();
    Response.ContentType = "image/Png";
    Response.BinaryWrite(ms.ToArray());

    }
    finally
    {
    bmp.Dispose();
    g.Dispose();
    }
    #endregion
    return View();
    }

    public string CheckCode(string valdatecode)
    {
    if ( Session["code"].ToString().ToUpper()== valdatecode.ToUpper())
    {
    return "true";
    }
    else
    {
    return "false";
    }
    }

  • 相关阅读:
    设定cookie 获取cookie数据的转换
    cookie cookie的获取
    常见的请求方式 json字符串
    请求报文和响应报文
    http协议
    php分页查询 子查询
    MAC 地址为什么不需要全球唯一
    ceph分布式存储简介
    一文看懂为什么边缘计算是大势所趋
    真香!Windows 可直接运行 Linux 了
  • 原文地址:https://www.cnblogs.com/jinghuimin/p/4976670.html
Copyright © 2011-2022 走看看