Net Core教程
ASP.net 简单注册界面
本文主要是介绍ASP.net 简单注册界面，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
一.说明
此文是小白在学习张晨光老师的视频教学<<Asp.Net WEB服务器编程技术>>中做的学习笔记,一些知识点也是跟着教程走的,大家也可以去老师的主页去学习,谢谢大家.
这一篇要练习的是,如下课程的代码:
先新建img文件夹,用来存储图片:
图片大家可以在网上随便找一些壁纸来替代,练习所用,不必太过讲究
再新建js文件夹,用来存放js文件:
从 jquery.com 下载 jQuery 库
二.注册界面(RegUser.aspx)
前端代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegUser.aspx.cs" Inherits="MyMusci.RegUser" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>会员注册</title>
<link href="bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet" />
<script src="bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
<!--调用jquery-->
<script src="js/jquery.js"></script>
<style>
/*将整个登入的div垂直居中*/
.all {
width: 700px;
height: 260px;
background-color: rgba(205,197,191,0.8);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
padding:0;
}
body {
background-image: url("img/ys.jpg");
/*整个图片作为背景，不够自动拉伸*/
background-size: cover;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container all">
<table class="table">
<tr>
<td colspan="3" class="table-primary display-6 text-center bg-primary text-white">会员注册</td>
</tr>
<tr>
<td>账户</td>
<td>
<asp:TextBox ID="userName" runat="server"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="rfv_useName" runat="server" ControlToValidate="userName" Display="Dynamic" ErrorMessage="RequiredFieldValidator" ForeColor="Red">账户不可为空</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rev_userName" runat="server" ControlToValidate="userName" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ForeColor="Red" ValidationExpression="\w{5,13}">您输入的账户异常(5-12位)</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style2">密码</td>
<td class="auto-style2">
<asp:TextBox ID="userPwd" runat="server"></asp:TextBox>
</td>
<td class="auto-style2">
<asp:RequiredFieldValidator ID="rfv_userPwd" runat="server" ControlToValidate="userPwd" Display="Dynamic" ErrorMessage="RequiredFieldValidator" ForeColor="Red">密码不可为空</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rev_userPwd" runat="server" ControlToValidate="userPwd" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ForeColor="Red" ValidationExpression="\w{8,13}">您输入的密码异常(8位)</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style2">确认密码</td>
<td class="auto-style2">
<asp:TextBox ID="info_userPwd" runat="server"></asp:TextBox>
</td>
<td class="auto-style2">
<%--CompareValidator 控件用于将一个输入控件的值与另一个输入控件的值或常数值进行比较
ControlToCompare 要与所验证的控件进行比较的控件名称
ControlToValidate 要验证的控件的 id
Display 如果输入通过验证，页面上不预留显示消息的空间
ForeColor 控件的前景颜色
--%>
<asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="CompareValidator" ControlToCompare="userPwd" ControlToValidate="info_userPwd" Display="Dynamic" ForeColor="Red">您两次输入的密码不一致,请重新输入</asp:CompareValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="userPwd" Display="Dynamic" ErrorMessage="RequiredFieldValidator" ForeColor="Red">密码不可为空</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="userPwd" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ForeColor="Red" ValidationExpression="\w{8,13}">您输入的密码异常(8位)</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btn_sub" runat="server" Text="登录" class="btn btn-primary" OnClick="btn_sub_Click" />
</td>
<td>
</td>
<td> </td>
</tr>
</table>
</div>
</form>
<script>
//当光表移除该文本框时,触发的事件(我们希望当鼠标移除文本框时,对用户名进行校验)
$("#userName").blur(function () {
//使用ajax方法
$.ajax({
type: "post",//类型(get/post)
url: "IsExistsUser.aspx",//跳转的地址
data: "uname=" + $("#userName").val(),//数据
//无异常时调用的方法
success: function (msg) {
//msg返回的参数,接受到IsExistsUser.aspx所返回的值,并加以使用对应的方法
//alert("ok:"+msg)
if (msg == "1") {
//返回值为1表示数据库已存在该用户
alert("您输入的账户已被注册,请重新输入!!!");
//如果数据库存在此用户名,则清空该文本框中
$("#userName").val("");
//并将光标重新定位到该文本框中
$("#userName").focus();
} else {
//alert("msg:"+msg);
}
},
//异常时调用的方法
error: function (msg) {
alert("数据异常")
}
})
})
//登录按钮点击后,我们希望可以在数据库中插入用户输入的用户信息
$("#btn_sub").click(function () {
//测试
//alert("按钮被点击")
$.ajax({
type: "post",
url: "Handler/LoginHandler.ashx",//一般处理程序,统一放到一个文件夹下,方便管理
data: { "name": $("#userName").val(), "pwd": $("#userPwd").val() },//此处使用json格式赋值
success: function (msg) {
//alert("处理返回值:"+msg)
if (msg == "1") {
alert("恭喜您,已注册成功!")
//注册成功去某个界面
location.href = "login_new.aspx";
} else {
alert("注册失败!")
}
},
error: function (msg) {
alert("数据异常")
}
})
})
</script>
</body>
</html>
后台代码并无添加代码
三.ToolMysqlDate.cs的相关配置
新建Handler文件夹,并创建LoginHandler.ashx文件.
文件架构:
代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Collections;
namespace MyMusci.Handler
{
/// <summary>
/// LoginHandler 的摘要说明
/// </summary>
public class LoginHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
//读取ajax的传递的值
string name =context.Request["name"];
string pwd = context.Request["pwd"];
//之前的练习中使用并且提到过
string sql = "INSERT INTO user_all ( user_name,user_pwd ) VALUES (?name,?pwd); ";
Hashtable ht = new Hashtable();
ht.Add("name", name);
ht.Add("pwd", pwd);
int res=ToolMysqlDate.executeSql(sql, ht);
//如果插入成功,则返回1,类似的用法之前的ajax要用到过
if (res > 0)
{
context.Response.Write("1");
}
else {
context.Response.Write("0");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
四.ToolMysqlDate.cs增加方法
我们在之前的ToolMysqlDate.cs中添加如下方法:
//封装增删该方法
public static int executeSql(String sql, Hashtable ht) {
conn.Open();
MySqlCommand cmd = new MySqlCommand(sql, conn);
//把ht传递过来之后，需要给参数赋值；
foreach (DictionaryEntry de in ht)
{
//第一个参数：key;第二个参数:value值
cmd.Parameters.AddWithValue(de.Key.ToString(), de.Value.ToString());
}
int result;
try
{
//运行并赋值,如果插入,删除,改SQL语句执行成功,则返回1
result = Convert.ToInt32(cmd.ExecuteNonQuery());
}
finally
{
conn.Close();
}
//返回
return result;
}
五.给login_new.aspx添加css样式
为了避免大家复刻过程中出现一些不必要的问题,这里小白将全部代码放在下面,供大家练习:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login_new.aspx.cs" Inherits="MyMusci.login_new" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet" />
<script src="bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
<style>
/*将整个登入的div垂直居中*/
.all {
width: 700px;
height: 260px;
background-color: rgba(205,197,191,0.8);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
padding:0;
}
body {
background-image: url("img/dm.jpg");
/*整个图片作为背景，不够自动拉伸*/
background-size: cover;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container mt-3">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table class="table all">
<tr>
<td class="table-primary display-3 text-center text-primary" colspan="3">登录界面</td>
</tr>
<tr>
<td>账户</td>
<td>
<asp:TextBox ID="userName" runat="server"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="rfv_useName" runat="server" ControlToValidate="userName" Display="Dynamic" ErrorMessage="RequiredFieldValidator" ForeColor="Red">账户不可为空</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rev_userName" runat="server" ControlToValidate="userName" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ForeColor="Red" ValidationExpression="\w{5,13}">您输入的账户异常(5-12位)</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style2">密码</td>
<td class="auto-style2">
<asp:TextBox ID="userPwd" runat="server"></asp:TextBox>
</td>
<td class="auto-style2">
<asp:RequiredFieldValidator ID="rfv_userPwd" runat="server" ControlToValidate="userPwd" Display="Dynamic" ErrorMessage="RequiredFieldValidator" ForeColor="Red">密码不可为空</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rev_userPwd" runat="server" ControlToValidate="userPwd" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ForeColor="Red" ValidationExpression="\w{8,13}">您输入的密码异常(8位)</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btn_sub" runat="server" class="btn btn-primary" OnClick="btn_sub_Click" Text="登录" />
</td>
<td>
<asp:Button ID="btn_reset" runat="server" class="btn btn-secondary" OnClick="btn_reset_Click" Text="重置" />
</td>
<td> </td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
六.效果
会员注册界面:
当我们输入的用户名存在于数据库中,则提示:
用户名密码无误,则提示:
在点击确认后,系统跳转至登录界面(login_new.aspx):
这篇关于ASP.net 简单注册界面的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
沐雪多租宝商城源码从.NetCore3.1升级到.Net6的步骤03-01
-
使用Microsoft.Extensions.AI在.NET中生成嵌入向量12-06
-
微软研究：RAG系统的四个层次提升理解与回答能力11-18
-
C#中怎么从PEM格式的证书中提取公钥？-icode9专业技术文章分享11-15
-
云架构设计——如何用diagrams.net绘制专业的AWS架构图？11-14
-
首个适配Visual Studio平台的国产智能编程助手CodeGeeX正式上线！C#程序员必备效率神器！05-08
-
C#设计模式之十六迭代器模式（Iterator Pattern）【行为型】03-30
-
c# datetime tryparse03-29
-
list find index c#02-21
-
convert toint32 c#01-24
-
Advanced .Net Debugging 1：你必须知道的调试工具01-24
-
.NET集成IdGenerator生成分布式全局唯一ID01-24
-
用CI/CD工具Vela部署Elasticsearch + C# 如何使用01-23
-
.NET开源的简单、快速、强大的前后端分离后台权限管理系统01-23
-
C#对象二进制序列化优化：位域技术实现极限压缩01-23
栏目导航
