验证码

验证码的样式，把验证码定位到输入验证码的输入框的右边上
Input 标签的 rounded 是设置输入框的四角为圆角
Img 标签 是放验证码
@验证码@

<div class="input-group mb-3">
	<div class="input-group-prepend">
	 	<span class="vCode">验证码</span>
	</div>
	<input type="text" class="form-control rounded" id="validCode" name="validCode" placeholder="输入验证码">
	<img src=" " id="validCodeImg" />
</div>

浏览器上有 验证码 提示输入验证码输入的位置 放置验证码图片的位置
效果如图

//获取session中的验证码
string sessionValidCode =Session[“validCode”].ToString();

//输入的验证码和验证码图片上的验证码，在判断他们是否相等的时候
//要他们忽略的大小写

If(sessionValidCode.Equals
	(strValidCode.Trim(),StringComparison.CurrentCultureIgnoreCase)) {
} 

//因为浏览器缓存问题，没有给它加上参数t的话，点击图片切换验证码图片是切换不了的，加上了参数t，你点击的时候，每张图片保存的时候的路径有了毫秒，这样每张图片的路径就不相同了（除非你的点击速度快过毫秒）

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

//点击图片切换验证码图片，
//加上参数 t，解决浏览器缓存问题
//把点击事件绑定到id为 validCodeImg 的img 标签上
//"/Main/CreateValidCodeImage?t=" + new Date().getTime() 给图片的路劲加上时间

$("#validCodeImg").click(function () {
	$(this).prop("src", "/Main/CreateValidCodeImage?t=" + new Date().getTime());
});

// 控制器方法名为 CreateValidCodeImage
// 生成随机验证码图片

public ActionResult CreateValidCodeImage()
{
	// 调用已经封装好的 ValidCodeUtils 方法
	// 生成长度为5的随机的验证码字符串
	string strRandom = ValidCodeUtils.GetRandomCode(5);
	// 根据生成的验证码字符串生成 验证码图片
	byte[] byteImg = ValidCodeUtils.CreateImage(strRandom);
	// 将验证码字符串存入session中
	Session["validCode"] = strRandom;
	// 把图片返回到试图 File(文件)
	return File(byteImg, @"image/jpeg");
}

Img 里的src 填入控制器里写好的方法，指定跳转路径为 “/Main/CreateValidCodeImage” ，这样一打开页面就有一个验证码了
没有填的话，验证码图片那里就会是空的，点击一下才会出现验证码图片

<img src="/Main/CreateValidCodeImage" id="validCodeImg" />