超详细编写登录注册页面（内含验证码登录）

最近做项目，着实出师不利，刚登录就遇到bug，特在此记录一下，以此为鉴。首先，说明一下，这个登录页面内含验证码登录，当然也会有验证码验证，还有数据库没有设置加密，当然项目也没有强制要求，主要因为麻烦，索性就不加密了。这篇文章视图、控制器以及插件的代码都齐全，仅供参考，不可盲目复制。

以下便是页面展示。

点击切换，进入注册。

话不多说，进入正题。

首先，在创建一个控制器添加视图。

public ActionResult Login()
        {
            return View();
        }

然后在视图引入下面代码使用到的插件，css、script、layui。Css主要放在head标签里面，script和layui可与css标签放在head标签里面或者div标签后面。在这里注意了，一定要注意引入插件的路径。

<link href="~/Content/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" href="~/Content/css/style.css">
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Content/layui/layui/layui.js"></script>

以下是视图登录注册div的代码，包括form表单的代码，分别在div里面放有一个input标签，编写了用户名、密码、验证码的代码，以及id、name值，方便后面获取值。

 <div class="main">
        <h1>高端智能汽修厂</h1>
        <div class="w3_login">
            <div class="w3_login_module">
                <div class="module form-module">
                    <div class="toggle">
                        <i class="fa fa-times fa-pencil"></i>
                        <div class="tooltip">点击切换</div>
                    </div>
                    <div class="form">
                        <h2>登录账号</h2>
                        @* <form id="fmLogin"> 登录页面跳转到主页面将不会返回原页面*@
                        <form action="#" method="post" id="fmLogin">
                            <div class="form-group row">
                                <div class="col-sm-9 col-xl-10">
                                    <input type="text" class="form-control" id="Number" name="Number" placeholder="请输入您的用户名">
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-9 col-xl-10">
                                    <input type="password" class="form-control" id="PassWord" name="passWord" placeholder="请输入您的密码">
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-9 col-xl-10">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="IdentifyingCode" name="validCode" placeholder="请您输入验证码">
                                        <div class="input-group-prepend">
                                            <img src="/Main/ValidCode" class="input-group-text p-0" id="ValidateCode" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-sm-10 offset-sm-3 offset-lg-2">
                                    <input type="submit" name="btn" id="btnSubmit" value="登 录" />
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="btn" typeof="type" spellcheck="true"></div>
                    <div class="form">
                        <h2>创建一个账号</h2>
                        <form action="#" method="post" id="fmLogin">
                            <input type="text" name="Number" placeholder="用户名" required=" " />
                            <input type="PassWord" name="Password" placeholder="密码" required=" " />
                            <input type="text" name="Phone" placeholder="电话" required=" " />
                            <input type="submit" value="注册" />
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>

下面，主要获取用户名、密码、验证码的值，以及判断验证，开启关闭加载层，提交数据，并且清空数据，设置字符串不为空。

 <script type="text/javascript">
        var layer;
        $('.toggle').click(function () {
            $(this).children('i').toggleClass('fa-pencil');
            $('.form').animate({ height: "toggle", 'padding-top': 'toggle', 'padding-bottom': 'toggle', opacity: "toggle" }, "slow");
        });
        layui.use(['layer'], function () {
            layer = layui.layer;
        })
        $("#ValidateCode").click(function () {
            $(this).prop("src", "/Main/ValidCode");
        });
        $("#btnSubmit").click(function () {
            //===登录逻辑Number
            //获取值
            var Number = $('#fmLogin [name="Number"]').val();
            var password = $('#fmLogin [name="passWord"]').val();
            var validCode = $('#fmLogin [name="validCode"]').val();
            //判断是否填写数据
            if (strValIsNotNull(Number) && strValIsNotNull(password) && strValIsNotNull(validCode)) {
                //异步提交
                var layerIndex = layer.load();//开启layer加载层
                $.post("/Main/UserLogin", {
                    Number: Number,
                    Password: password,
                    validCode: validCode,
                }, function (msg) {
                    layer.close(layerIndex);//关闭加载层
                    if (msg.State) {
                        //layer.alert("登录成功");
                        //登录成功，跳转到主页面
                        window.location.replace("/Main/Main");//使用replace不会出现后退按钮
                    } else {
                        layer.alert(msg.Text);
                        //清空密码和验证码
                        $("#PassWord").val("");
                        $("#ValidateCode").val("");
                        //验证码刷新
                        $("#ValidateCode").click();
                    }
                });
            } else {
                layer.alert("登录信息请填写完整");
            }
        })
        //字符串值不为空
        function strValIsNotNull(strVal) {
            return strVal != undefined && strVal != null && strVal != '';
        }
    </script>

视图结束了，来到控制器，编写控制器的代码。

先写验证码的验证，这里我设置了验证码默认为“123”，不为别的就为了方便，如果你想设置随机生成一个验证码，取消第一行注释就可以了，可以看下面的代码，每一行都有详细的解释。这个可以作为模板，大家需要可以收藏。

 public ActionResult ValidCode()
        {
            //生成一个随机字符串 验证码
            //string strRandom = ValidCodeUtils.GetRandomCode(5);
            string strRandom = "123";
            //将验证码存入Session会话
            Session["validCode"] = strRandom;
            //byte[] 根据验证码产生图片
            byte[] imgByte = ValidCodeUtils.CreateImage(strRandom);
            //返回图片信息
            return File(imgByte, @"image/jpeg");
        }

然后就是登录的验证了，这里获取页面传递过来的数据，并设置去空格，还有存放在session的验证码，为了方便捕获错误我使用了try catch获取，然后判断填入的验证码和session中的验证码是否一致。接着编写用户名和密码的验证，判断是否与数据库的一致。所有验证通过，最后才登录成功。

  public ActionResult UserLogin(SYS_Type user)
        {
            ReturnJson msg = new ReturnJson();
            //获取页面传递的数据
            string strNumber = user.Number.Trim();//用户名
            string strPassword = user.Password.Trim();//密码
            string strValidCode = Request["validCode"].Trim();//验证码
           //获取存放在session中的验证码
            string sessionValiCode = "";
            try
            {
                sessionValiCode = Session["validCode"].ToString();
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
            }
            //判断填入的验证和session中的验证码是否一致
            if (sessionValiCode.Equals(strValidCode, StringComparison.InvariantCultureIgnoreCase))
            {
                try
                {
                    SYS_Type modType = myModel.SYS_Type.Single(m => m.Number == strNumber);
                    
                    if (modType.Password.Equals(strPassword))
                    {
                            msg.State = true;
                            msg.Text = "登录成功！";
                    }
                    else
                    {
                        msg.Text = "该用户密码错误！";
                    }
                }
                catch(Exception e)
                {
                    msg.Text = "该用户不存在！";
                }
            }
            else
            {
                msg.Text = "验证码错误";
            }

            return Json(msg, JsonRequestBehavior.AllowGet);

        }