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