设计验证码的方法
开发工具与关键技术: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”);
}