生成验证码
我们在登录页面的时候,不仅需要输入账号和密码,经常也要输入验证码才能登录。现在我就写如何生成验证码。
关于生成验证码的部分页面HTML代码:
<div class="form-group form-row">
<label class="sr-only" for="validCode">
验证码
</label>
<div class="col-12 ">
<div class="input-group">
<div class="input-group-append">
<div class="input-group-text"><i class="fas fa-fw fa-key"></i></div>
</div>
<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>
</div>
</div>
</div>
页面JavaScript代码:
$(function () {
$("#validCodeImg").click(function () {
$(this).prop("src", "/Main/CreateValidCodeImage?t=" + new Date().getTime());
//$("#validCodeImg").attr("src", "/Main/CreateValidCodeImage?t=" + new Date().getTime());
});
});
写完页面的代码之后,去到控制器写方法。
public ActionResult CreateValidCodeImage()
{
//1、生成长度为5的随机的验证码字符串
string strRandom = ValidCodeUtils.GetRandomCode(5);
//2、根据生成的验证码字符串生成 验证码图片
byte[] imgByte = ValidCodeUtils.CreateImage(strRandom);
//3、将验证码字符串存入session中 key值为
Session["validCode"] = strRandom;
//4、把图片返回到视图(文件内容,文件格式);
return File(imgByte, @"image/jpeg");
}
效果图:
点击验证码图片,图片会变化,随机生成验证码。只有输入正确的验证码才能登录,不过这是验证登录的事情了。