如何设计验证码的实现
<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)" οnclick="ClickRemoveChangeCode();return false;">看不清</a>*@ <button id="btnLogin" type="submit" class="submit_button">登录</button> <div class="error"><span>+</span></div>(1)首先我们看到我们绑定验证码的这里是这样写的，<img src=”/Login/CheckCode?ID=1”>，那么前面的src绑定的地址什么意思呢？他的意思就是我们在Login控制器下面含有一个CheckCode方法来实现验证码的读取
(2)我们要实现验证码，首先我们就要写一个生成验证码的类，没什么难度，网上一搜一大推，下面就是我封装的生成验证码的类，首先我们在LYZJ.UserLimitMVC.Common类库下面新建一个KenceryValidateCode.cs类来存放生成验证码的代码，在这里我们需要给类库引入命名空间System.Drawing。最终的代码如下：
KenceryValidateCode.cs
KenceryValidateCode.cs using 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=”/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 = "/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 //}) }) </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)" οnclick="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>
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
