设计验证码的方法

设计验证码的方法

开发工具与关键技术：MVC
作者：本人
撰写时间：2019.6.2

验证码是用了拦截机器登录而设置的，所以大部分设置在登录页面上。
下面是任何设置验证码的方法。
首先，我们要先设置HTML页面的代码：

   <input type="text" name="validCode" id="validCode" value="" class="form-control" placeholder="验证码" />
    <div class="input-group-addon p-0"><img src="/Main/CreateValidCodeImage" width="100" height="38" id="validCodeImg" /></div>

在上面的代码中img的src="/Main/CreateValidCodeImage"，是用来获取控制器发送来的图片，可是img自身是无点击事件的所以无法通过点击验证码来实现切换效果，只有在刷新页面的时候来路径。
所以要给img标签一个id=“validCode”，通过ID来添加点击事件，然后再通过prop请求去改变img的路径。
代码如下：

$("#validCodeImg").click(function () {
     $(this).prop("src", "/Main/CreateValidCodeImage?");
});

写到这里可能会出现错误，点击的时候没有效果，这个错误是因为浏览器的缓存机制所造成的，浏览器为了不去重复的去请求服务器，浏览器会把相同路径的图片缓存下来，当重复设置同样路径的时候，浏览器就会认为它们是一样的图片，就会把缓存的图片给输出到页面上，但是没有修改路径，就导致了可以点击，但是没有效果。
所以在修改路径的时候可以传一个参数进去，然后通过修改参数来实现路径的不同。
传一个参数（t），然后new Date().getTime()
Date()是返回当前日期和时间，getTime()是返回毫秒数。
这样就使得每次的路径都不一样，
$("#validCodeImg").click(function () {
$(this).prop(“src”, “/Main/CreateValidCodeImage?t=” + new Date().getTime());
});

这里要用到一个静态的公共类，一共要两个方法。
第一个方法：
GetRandomCode()
创造一个空字符串，用了放入产生的数字和密码混合的随机数，用Random产生随机数，
根据intLength的数量来进行for循环，得到一个非负的字符串。然后除以3，判断余数，余0是数字，1是大写字母，2是小写字母，然后拼接返回。
第二个方法：
CreateImage()
根据指定的大小新增一张空图片，然后将GetRandomCode()返回的字符串绘制在图片上，
绘制干扰线，然后把图片保存到内存流中，最后将内存流中的内容写入byte数组返回。
如图：

最后控制器的方法：
public ActionResult CreateValidCodeImage()
{
//1.生成长度为5的随机的验证码字符串
string strRandom = ValidCodeUtils.GetRandomCode(5);
//2、根据生成的验证码字符串生成 验证码图片
byte[] byteImg = ValidCodeUtils.CreateImage(strRandom);
//3、将验证码字符串存入session中 key值为
Session[“validCode”] = strRandom;
//4、把图片返回到视图
return File(byteImg, @“image/jpeg”);
}