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

admin管理员组

文章数量:1794759

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

最近做项目，着实出师不利，刚登录就遇到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); }

本文标签： 验证码页面详细