能从图中看到我们验证码格式的不同之处，这也是文章开头说的验证码格式的多样性，当然可能还有其他组成格式请允许我暂时忽略，下面我们来做一个点击图片获取新验证码的功能和点击登录按钮去后台程序判断验证码是否匹配的例子，先来修改试图界面代码如下：
@{ ViewBag.Title = "ValidtCode"; } <h2>神牛 - 验证码实例</h2> <div> <table> <tbody> <tr> <td>全部随机</td> <td> <img src="https://www.jb51.net/home/GetValidateCode" data-src="https://www.jb51.net/home/GetValidateCode" /> <input type="text" placeholder="请输入验证码" /> <button>登 录</button> <span></span> </td> </tr> <tr> <td>小写|大写|数字|汉字</td> <td><img src="https://www.jb51.net/home/GetValidateCode01" data-src="https://www.jb51.net/home/GetValidateCode01" /></td> </tr> <tr> <td>汉字|数字|大写|小写</td> <td><img src="https://www.jb51.net/home/GetValidateCode02" data-src="https://www.jb51.net/home/GetValidateCode02" /></td> </tr> <tr> <td>全部大写</td> <td><img src="https://www.jb51.net/home/GetValidateCode03" data-src="https://www.jb51.net/home/GetValidateCode03" /></td> </tr> <tr> <td>全部汉字</td> <td><img src="https://www.jb51.net/home/GetValidateCode04" data-src="https://www.jb51.net/home/GetValidateCode04" /></td> </tr> <tr> <td>全部小写</td> <td><img src="https://www.jb51.net/home/GetValidateCode05" data-src="https://www.jb51.net/home/GetValidateCode05" /></td> </tr> </tbody> </table> </div> <script src="https://www.jb51.net/~/Scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function () { $("img").on("click", function () { var nowTime = new Date().getTime(); var src = $(this).attr("data-src") + "?t=" + nowTime; if (src.length <= 0) { return; } $(this).attr("src", src); }); $("button").on("click", function () { var msg = $("#msg"); var code = $("input[name='code']").val(); if (code.length <= 0) { msg.html("请输入验证码！"); return; } $.post("/home/UserLogin", { code: code }, function (result) { if (result) { msg.html(result.Msg); if (!result.IsOk) { $("#imgCode").click(); } } }); }) }) </script>
然后在Controller中增加如下登录验证代码：
public JsonResult UserLogin(string code) { var data = new Stage.Com.Extend.StageModel.MoData(); if (string.IsNullOrWhiteSpace(code)) { data.Msg = "验证码不能为空"; return Json(data); } var compareCode = Session["code"]; if (!compareCode.Equals(code)) { data.Msg = "验证码错误"; return Json(data); } data.IsOk = true; data.Msg = "验证码验证成功"; return Json(data); } public FileResult GetValidateCode() { //返回的验证码文字 var code = string.Empty; var bb_code = ValidateCode.GetValidateCodeStream(ref code); var key = "code"; if (Session[key] != null) { Session.Remove(key); } Session[key] = code; return File(bb_code, "image/jpeg"); }
由于我这里无法截动态图，所点击测试获取验证码我这里直接给出线上的一个例子，各位可以试试：:1001/home/ValidCode，点击获取新验证码的关键代码是： $(this).attr("src", src); 重新给img元素的scr赋值，不过这里要注意由于浏览器缓存的原因，这里赋值的时候需要加上一个动态参数，我这里是使用时间作为请求参数，因此有了以下的代码： $(this).attr("data-src") + "?t=" + nowTime; 这是特别的地方需要注意；好了咋们来直接测试登陆是否能从后端判断验证码是否正确匹配吧，这里用的是session来保存获取验证码图片返回的验证代码，然后在登陆时候判断用户数据的验证码是否和后台session的验证一样：
验证失败：
验证成功：
好了测试用例就这么多，如果您觉得我这个验证码生成例子还可以并且您希望使用那么请注意，参数的传递，不同得到的验证码格式不同，主要方法是：