生成验证码

我们在登录页面的时候，不仅需要输入账号和密码，经常也要输入验证码才能登录。现在我就写如何生成验证码。
关于生成验证码的部分页面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");
    }

效果图：

点击验证码图片，图片会变化，随机生成验证码。只有输入正确的验证码才能登录，不过这是验证登录的事情了。