一、先看一下實現的效果:
二、具體實現
1、封裝的helper類,拿來用就行
public class VerificationCodeHelper { private static Color BackColor = Color.White; private static int Width = 62; private static int Height = 21; private Random _random; // private string _code; private int _brushNameIndex; public byte[] GetVCode(string codeStr) { _random = new Random(); using (Bitmap img = new Bitmap(Width, Height)) { // _code = GetRandomCode(); // System.Web.HttpContext.Current.Session["vcode"] = _code; using (Graphics g = Graphics.FromImage(img)) { g.Clear(Color.White);//繪畫背景顏色 Paint_Text(g, codeStr);// 繪畫文字 // g.DrawString(strCode, new Font("微軟雅黑", 15), Brushes.Blue, new PointF(5, 2));// 繪畫文字 Paint_TextStain(img);// 繪畫噪音點 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, 5); } }
2、HTML頁面部分:
<div class="row cl"> <div class="formControls col-xs-8 col-xs-offset-3"> <input class="input-text size-L" type="text" placeholder="驗證碼" onblur="if(this.value==''){this.value='驗證碼:'}" onclick="if(this.value=='驗證碼:'){this.value='';}" value="驗證碼:" style="width:150px;"> <img id="checkloing" src="/Login/VCode" width="70" height="40" class="loginFormCheckCodeImg" onclick="reloadcode('/Login/VCode')" title="看不清,換一張" /> </div> </div>
//刷新驗證碼 js腳本代碼 function reloadcode(srcStr) { document.getElementById("checkloing").src = srcStr + "?rand=" + Math.random(); } var checkInfo = ""; //檢查數據 function Check() { checkInfo = ""; //檢查不能為空的數據 $("input[Require='True']").each(function (i) { var tmpName = $(this).attr("name"); var strVal = $(this).val(); strVal = strVal.replace(/\s/g, "") if (!strVal) checkInfo += $(this).attr("placeholder") + "不能為空。<br/>"; }); if (checkInfo) return false; return true; } $(function () { $("#btnLogin").click(function () { var ii = layer.load(); if (!Check()) { layer.close(ii); layer.msg('' + checkInfo, function () { }); return; } $("#loadingDiv").show(); $.ajax({ url: "/Home/Index", type: "post", data: "userName=" + $("#tbUserName").val() + "&pwd=" + $("#tbPWD").val() + "&code=" + $("#checkInput").val(), success: function (data) { debugger; if (data.Result == "0") { layer.close(ii); layer.msg('' + data.MSG); return; } else if (data.Result == "1") { layer.close(ii); window.location.href = "/Home/Index"; } }, error: function (data) { layer.close(ii); layer.msg('' + data.MSG); } }); }); });
MVC控制器提供驗證碼的方法:
[AllowAnonymous]//跳過登陸驗證 public ActionResult VCode() { VerificationCodeHelper vcode = new VerificationCodeHelper(); 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"); } }
驗證頁面數據的方法:
[HttpPost] public ActionResult Index(string userName, string pwd) { try { string vccode = Request.Form["code"]; if (string.IsNullOrEmpty(vccode)) return Json(new { Result = "0", MSG = "請填寫驗證碼" }); else { if (Session["code"] == null) return Json(new { Result = "0", MSG = "驗證碼已過期,請點擊刷新驗證碼" }); string str = Session["code"].ToString(); str = str.ToLower(); vccode = vccode.ToLower(); if (str != vccode) return Json(new { Result = "0", MSG = "驗證碼填寫錯誤!" }); else { Session["code"] = null; } if (string.IsNullOrEmpty(userName) || string.IsNullOrEmpty(pwd)) { return Json(new { Result = "0", MSG = "用戶或密碼沒有填寫" }); } //查詢此用戶 #region 查詢此用戶 List<Models.MySqlUser> adminml = new List<Models.MySqlUser>(); Models.MySqlUser admin = new Models.MySqlUser(); adminml = IBCodeBll.GetModelList(userName.Trim()); if (adminml.Count > 0) { if (!adminml[0].password.ToLower().Equals(Maticsoft.Common.DEncrypt.DESEncrypt.Encrypt2(pwd.Trim()).ToLower())) { return Json(new { Result = "0", MSG = "密碼錯誤!" }); } } else { return Json(new { Result = "0", MSG = "用戶不在在!" }); } #endregion Session["UserName"] = userName.Trim().ToString(); return Json(new { Result = "1", MSG = "登錄成功!" }); } } catch (Exception ex) { return Json(new { Result = "0", MSG = ex.Message }); } }
參考資料:https://www.cnblogs.com/zhangxiaoyong/p/6210953.html