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

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

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

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（登录注册页面，验证码）
基于 Vue3.x + Vant UI 的多功能记账本(四) 文章目录基于 Vue3.x + Vant UI 的多功能记账本(四) 项目演示 1.登录注册页面 2.图片验证码 3.修改 axios ...
Flutter学习第十五天：2021年最新版超详细Flutter实现Mob+SMSSDK手机验证码登录实现，Android和Flutter混合开发？
Flutter实现手机验证码登录第一步:在mob平台配置SMSSDK环境第二步:建立flutter项目和android的library文件第三步:在Android的library文件中部署mob ...
前端登录注册页面、多方式登录功能、腾讯云短信发送功能二次封装(包)、发送短信接口
JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结一.环境准备与开发工具二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
JavaEE学习之jsp编写登陆注册页面
JavaEE学习之jsp编写登陆注册页面刚开始学习javaee,好多东西需要一点点积累.最近用jsp和简单的JavaScript写的登录注册界面,简单做一下记录. 准备–页面布局登录和注册界面的H ...
php and mysql登录注册页面
本文将基于PHP以及mysql设计一个最最基础的登录注册页面,所用到的软件有wampserver以及各种PHP编译器,我选择的是,vscode. 第一部分先写个连接数据库文件. conn.php &l ...
做登录/注册页面需考虑哪些问题？
[文章摘要]现在人手一部手机的前提下,手机号登录/注册的方式无疑是最简单直接的方式.而且现在很多其他注册方式,到后面还是会引导用户去绑定手机. 这几天在做登录/注册页面.做之前看了很多其他公司的登录/ ...
用java写注册表单_利用HTML表单标签编写一个注册页面
今天我们来写一个注册页面 form表单先来利用表单标签制作一个简单的注册页面,给大家说说标签的结构: 页面结构大体就是这样子的~ 利用HTML表单标签编写一个注册页面表单标签: 所有需要提交到服务 ...

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

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

最新文章

热门文章