【ASP.NET】一个简单的用户登录页面，含验证码

YQCC1

已于 2023-12-28 11:28:55 修改

阅读量865

点赞数 26

文章标签： asp.net 后端

于 2023-12-28 11:26:37 首次发布

本文链接：https://blog.csdn.net/YQCC1/article/details/135264947

版权

首先，生成随机验证码 ValidateCode，看这里

【ASP.NET】生成随机验证码 ValidateCode_asp.net 4.5 随机校验码-CSDN博客

开始登录界面

后台代码

public class UserLoginController : Controller
{
public IUserInfoService UserInfoService { get; set; }

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

public ActionResult ShowCode()
{
Common.ValidateCode validateCode = new Common.ValidateCode();

//生成验证码
string vCode = validateCode.CreateVCode();

Session["vCode"] = vCode;

//生成验证码图像Byte
byte[] imgByte = validateCode.GetCodeImgByte();

//获取验证码图像
//Bitmap bitmap = validateCode.VCodeImg;

return File(imgByte, @"image/jpeg");
}

public ActionResult PrecessLogin()
{
//处理验证码
string strCode = Request["inputCode"];

string sessionCode = Session["vCode"] as string;

Session["vCode"] = null;

if (string.IsNullOrEmpty(sessionCode)|| strCode != sessionCode)
{
return Content("验证码错误！");
}

//处理用户名密码
string name = Request["inputName"];
string pwd = Request["inputPassword"];

short delNormal = (short)Model.DelFlagEnum.Normal;

var userInfo = UserInfoService.GetEntities(u => u.UName == name && u.Pwd == pwd && u.DelFlag == delNormal).FirstOrDefault();

if (userInfo == null)
{
return Content("用户名密码错误！");
}

Session["loginUser"] = userInfo;

//正确，跳转首页
return Content("ok");

}

}

前台代码

@{
Layout = "";
ViewBag.Title = "Index";
}

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/modernizr-2.8.3.js"></script>

<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color:skyblue;
}

.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
background-color:white;
}

.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}

.form-signin .checkbox {
font-weight: normal;
}

.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}

.form-signin .form-control:focus {
z-index: 2;
}

.form-signin input[type="text"] {
margin-bottom: 10px;
}

.form-signin input[type="password"] {
margin-bottom: 10px;
}

.form-signin input[id="inputCode"] {
float: left;
width: 100px;
}

#codeDiv {
width: 100%;
height: 46px;
}

#codeNumDiv {
float: right
}

#imgCode {
width: 80px;
height: 45px
}

</style>
</head>

<body>
<div class="container">

@using (Ajax.BeginForm("PrecessLogin", "UserLogin", new AjaxOptions() { OnSuccess = "afterLogin" },new { @class= "form-signin" }))
{
<h2 class="form-signin-heading">用户登录</h2>
<label for="inputName" class="sr-only">用户名</label>
<input type="text" id="inputName" name="inputName" class="form-control" placeholder="用户名" required autofocus>
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" name="inputPassword" class="form-control" placeholder="密码" required>

<div id="codeDiv">
<label for="inputCode" class="sr-only">验证码</label>
<input type="text" id="inputCode" name="inputCode" class="form-control" placeholder="验证码" required>

<div id="codeNumDiv">
<img id="imgCode" src="/UserLogin/ShowCode?id=2" />
<a href="javascript:void(0)" οnclick="changeCheckCode(); return false;">看不清，换一张</a>
</div>
</div>

<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> 记住密码
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>

<hr />
<footer>
<p>© 哈哈</p>
</footer>
}

</div>

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>

<script type="text/javascript">
$(function () {
//点击图片，改变验证码
$("#imgCode").click(changeCheckCode);
});

//改变当前图片地址
function changeCheckCode() {
var old = $("#imgCode").attr("src");

var now = new Date();
var str = old +
now.getDay() +
now.getMinutes() +
now.getSeconds();

$("#imgCode").attr("src", str);
}

//登录成功执行
function afterLogin(data) {
if (data == "ok")
window.location.href = "/Home/Index";
else
alert(data);
}

</script>

</body>
</html>

YQCC1

关注

26
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
【ASP.NET】一个简单的用户登录页面，含验证码

input type="text" id="inputName" name="inputName" class="form-control" placeholder="用户名" required autofocus>用户登录
复制链接

扫一扫