设计验证码的方法

本文介绍了如何设计验证码,包括在HTML页面中设置验证码图片、处理点击事件以避免浏览器缓存问题,以及使用MVC框架中的控制器方法生成随机验证码。通过GetRandomCode方法生成随机字符串,CreateImage方法绘制干扰线并保存到内存流,最后控制器返回验证码图片。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

设计验证码的方法

开发工具与关键技术: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”);
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值