找回密码
 会员注册
查看: 460|回复: 0

ASP.net 简单注册界面

[复制链接]

250

主题

1

回帖

819

积分

管理员

积分
819
发表于 2024-2-29 08:57:33 | 显示全部楼层 |阅读模式

一.说明

此文是小白在学习张晨光老师的视频教学<>中做的学习笔记,一些知识点也是跟着教程走的,大家也可以去老师的主页去学习,谢谢大家.

这一篇要练习的是,如下课程的代码:

在这里插入图片描述

先新建img文件夹,用来存储图片:
在这里插入图片描述

图片大家可以在网上随便找一些壁纸来替代,练习所用,不必太过讲究

再新建js文件夹,用来存放js文件:

在这里插入图片描述

从 jquery.com 下载 jQuery

二.注册界面(RegUser.aspx)

前端代码:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegUser.aspx.cs" Inherits="MyMusci.RegUser" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title>会员注册</title>
  7. <link href="bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet" />
  8. <script src="bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
  9. <!--调用jquery-->
  10. <script src="js/jquery.js"></script>
  11. <style>
  12. /*将整个登入的div垂直居中*/
  13. .all {
  14. width: 700px;
  15. height: 260px;
  16. background-color: rgba(205,197,191,0.8);
  17. position: absolute;
  18. top: 0;
  19. bottom: 0;
  20. left: 0;
  21. right: 0;
  22. margin: auto;
  23. padding:0;
  24. }
  25. body {
  26. background-image: url("img/ys.jpg");
  27. /*整个图片作为背景,不够自动拉伸*/
  28. background-size: cover;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <form id="form1" runat="server">
  34. <div class="container all">
  35. <table class="table">
  36. <tr>
  37. <td colspan="3" class="table-primary display-6 text-center bg-primary text-white">会员注册</td>
  38. </tr>
  39. <tr>
  40. <td>账户</td>
  41. <td>
  42. <asp:TextBox ID="userName" runat="server"></asp:TextBox>
  43. </td>
  44. <td>
  45. <asp:RequiredFieldValidator ID="rfv_useName" runat="server" ControlToValidate="userName" Display="Dynamic" ErrorMessage="RequiredFieldValidator" ForeColor="Red">账户不可为空</asp:RequiredFieldValidator>
  46. <asp:RegularExpressionValidator ID="rev_userName" runat="server" ControlToValidate="userName" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ForeColor="Red" ValidationExpression="\w{5,13}">您输入的账户异常(5-12位)</asp:RegularExpressionValidator>
  47. </td>
  48. </tr>
  49. <tr>
  50. <td class="auto-style2">密码</td>
  51. <td class="auto-style2">
  52. <asp:TextBox ID="userPwd" runat="server"></asp:TextBox>
  53. </td>
  54. <td class="auto-style2">
  55. <asp:RequiredFieldValidator ID="rfv_userPwd" runat="server" ControlToValidate="userPwd" Display="Dynamic" ErrorMessage="RequiredFieldValidator" ForeColor="Red">密码不可为空</asp:RequiredFieldValidator>
  56. <asp:RegularExpressionValidator ID="rev_userPwd" runat="server" ControlToValidate="userPwd" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ForeColor="Red" ValidationExpression="\w{8,13}">您输入的密码异常(8位)</asp:RegularExpressionValidator>
  57. </td>
  58. </tr>
  59. <tr>
  60. <td class="auto-style2">确认密码</td>
  61. <td class="auto-style2">
  62. <asp:TextBox ID="info_userPwd" runat="server"></asp:TextBox>
  63. </td>
  64. <td class="auto-style2">
  65. <%--CompareValidator 控件用于将一个输入控件的值与另一个输入控件的值或常数值进行比较
  66. ControlToCompare 要与所验证的控件进行比较的控件名称
  67. ControlToValidate 要验证的控件的 id
  68. Display 如果输入通过验证,页面上不预留显示消息的空间
  69. ForeColor 控件的前景颜色
  70. --%>
  71. <asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="CompareValidator" ControlToCompare="userPwd" ControlToValidate="info_userPwd" Display="Dynamic" ForeColor="Red">您两次输入的密码不一致,请重新输入</asp:CompareValidator>
  72. <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="userPwd" Display="Dynamic" ErrorMessage="RequiredFieldValidator" ForeColor="Red">密码不可为空</asp:RequiredFieldValidator>
  73. <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="userPwd" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ForeColor="Red" ValidationExpression="\w{8,13}">您输入的密码异常(8位)</asp:RegularExpressionValidator>
  74. </td>
  75. </tr>
  76. <tr>
  77. <td>
  78. <asp:Button ID="btn_sub" runat="server" Text="登录" class="btn btn-primary" OnClick="btn_sub_Click" />
  79. </td>
  80. <td>
  81. &nbsp;</td>
  82. <td>&nbsp;</td>
  83. </tr>
  84. </table>
  85. </div>
  86. </form>
  87. <script>
  88. //当光表移除该文本框时,触发的事件(我们希望当鼠标移除文本框时,对用户名进行校验)
  89. $("#userName").blur(function () {
  90. //使用ajax方法
  91. $.ajax({
  92. type: "post",//类型(get/post)
  93. url: "IsExistsUser.aspx",//跳转的地址
  94. data: "uname=" + $("#userName").val(),//数据
  95. //无异常时调用的方法
  96. success: function (msg) {
  97. //msg返回的参数,接受到IsExistsUser.aspx所返回的值,并加以使用对应的方法
  98. //alert("ok:"+msg)
  99. if (msg == "1") {
  100. //返回值为1表示数据库已存在该用户
  101. alert("您输入的账户已被注册,请重新输入!!!");
  102. //如果数据库存在此用户名,则清空该文本框中
  103. $("#userName").val("");
  104. //并将光标重新定位到该文本框中
  105. $("#userName").focus();
  106. } else {
  107. //alert("msg:"+msg);
  108. }
  109. },
  110. //异常时调用的方法
  111. error: function (msg) {
  112. alert("数据异常")
  113. }
  114. })
  115. })
  116. //登录按钮点击后,我们希望可以在数据库中插入用户输入的用户信息
  117. $("#btn_sub").click(function () {
  118. //测试
  119. //alert("按钮被点击")
  120. $.ajax({
  121. type: "post",
  122. url: "Handler/LoginHandler.ashx",//一般处理程序,统一放到一个文件夹下,方便管理
  123. data: { "name": $("#userName").val(), "pwd": $("#userPwd").val() },//此处使用json格式赋值
  124. success: function (msg) {
  125. //alert("处理返回值:"+msg)
  126. if (msg == "1") {
  127. alert("恭喜您,已注册成功!")
  128. //注册成功去某个界面
  129. location.href = "login_new.aspx";
  130. } else {
  131. alert("注册失败!")
  132. }
  133. },
  134. error: function (msg) {
  135. alert("数据异常")
  136. }
  137. })
  138. })
  139. </script>
  140. </body>
  141. </html>
复制代码

后台代码并无添加代码

三.ToolMysqlDate.cs的相关配置

新建Handler文件夹,并创建LoginHandler.ashx文件.

在这里插入图片描述

文件架构:
在这里插入图片描述

代码:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Collections;
  6. namespace MyMusci.Handler
  7. {
  8. /// <summary>
  9. /// LoginHandler 的摘要说明
  10. /// </summary>
  11. public class LoginHandler : IHttpHandler
  12. {
  13. public void ProcessRequest(HttpContext context)
  14. {
  15. context.Response.ContentType = "text/plain";
  16. //context.Response.Write("Hello World");
  17. //读取ajax的传递的值
  18. string name =context.Request["name"];
  19. string pwd = context.Request["pwd"];
  20. //之前的练习中使用并且提到过
  21. string sql = "INSERT INTO user_all ( user_name,user_pwd ) VALUES (?name,?pwd); ";
  22. Hashtable ht = new Hashtable();
  23. ht.Add("name", name);
  24. ht.Add("pwd", pwd);
  25. int res=ToolMysqlDate.executeSql(sql, ht);
  26. //如果插入成功,则返回1,类似的用法之前的ajax要用到过
  27. if (res > 0)
  28. {
  29. context.Response.Write("1");
  30. }
  31. else {
  32. context.Response.Write("0");
  33. }
  34. }
  35. public bool IsReusable
  36. {
  37. get
  38. {
  39. return false;
  40. }
  41. }
  42. }
  43. }
复制代码

四.ToolMysqlDate.cs增加方法

我们在之前的ToolMysqlDate.cs中添加如下方法:

  1. //封装增删该方法
  2. public static int executeSql(String sql, Hashtable ht) {
  3. conn.Open();
  4. MySqlCommand cmd = new MySqlCommand(sql, conn);
  5. //把ht传递过来之后,需要给参数赋值;
  6. foreach (DictionaryEntry de in ht)
  7. {
  8. //第一个参数:key;第二个参数:value值
  9. cmd.Parameters.AddWithValue(de.Key.ToString(), de.Value.ToString());
  10. }
  11. int result;
  12. try
  13. {
  14. //运行并赋值,如果插入,删除,改SQL语句执行成功,则返回1
  15. result = Convert.ToInt32(cmd.ExecuteNonQuery());
  16. }
  17. finally
  18. {
  19. conn.Close();
  20. }
  21. //返回
  22. return result;
  23. }
复制代码

五.给login_new.aspx添加css样式

为了避免大家复刻过程中出现一些不必要的问题,这里小白将全部代码放在下面,供大家练习:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login_new.aspx.cs" Inherits="MyMusci.login_new" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title></title>
  7. <link href="bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet" />
  8. <script src="bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
  9. <style>
  10. /*将整个登入的div垂直居中*/
  11. .all {
  12. width: 700px;
  13. height: 260px;
  14. background-color: rgba(205,197,191,0.8);
  15. position: absolute;
  16. top: 0;
  17. bottom: 0;
  18. left: 0;
  19. right: 0;
  20. margin: auto;
  21. padding:0;
  22. }
  23. body {
  24. background-image: url("img/dm.jpg");
  25. /*整个图片作为背景,不够自动拉伸*/
  26. background-size: cover;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <form id="form1" runat="server">
  32. <div class="container mt-3">
  33. <asp:ScriptManager ID="ScriptManager1" runat="server">
  34. </asp:ScriptManager>
  35. <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  36. <ContentTemplate>
  37. <table class="table all">
  38. <tr>
  39. <td class="table-primary display-3 text-center text-primary" colspan="3">登录界面</td>
  40. </tr>
  41. <tr>
  42. <td>账户</td>
  43. <td>
  44. <asp:TextBox ID="userName" runat="server"></asp:TextBox>
  45. </td>
  46. <td>
  47. <asp:RequiredFieldValidator ID="rfv_useName" runat="server" ControlToValidate="userName" Display="Dynamic" ErrorMessage="RequiredFieldValidator" ForeColor="Red">账户不可为空</asp:RequiredFieldValidator>
  48. <asp:RegularExpressionValidator ID="rev_userName" runat="server" ControlToValidate="userName" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ForeColor="Red" ValidationExpression="\w{5,13}">您输入的账户异常(5-12位)</asp:RegularExpressionValidator>
  49. </td>
  50. </tr>
  51. <tr>
  52. <td class="auto-style2">密码</td>
  53. <td class="auto-style2">
  54. <asp:TextBox ID="userPwd" runat="server"></asp:TextBox>
  55. </td>
  56. <td class="auto-style2">
  57. <asp:RequiredFieldValidator ID="rfv_userPwd" runat="server" ControlToValidate="userPwd" Display="Dynamic" ErrorMessage="RequiredFieldValidator" ForeColor="Red">密码不可为空</asp:RequiredFieldValidator>
  58. <asp:RegularExpressionValidator ID="rev_userPwd" runat="server" ControlToValidate="userPwd" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ForeColor="Red" ValidationExpression="\w{8,13}">您输入的密码异常(8位)</asp:RegularExpressionValidator>
  59. </td>
  60. </tr>
  61. <tr>
  62. <td>
  63. <asp:Button ID="btn_sub" runat="server" class="btn btn-primary" OnClick="btn_sub_Click" Text="登录" />
  64. </td>
  65. <td>
  66. <asp:Button ID="btn_reset" runat="server" class="btn btn-secondary" OnClick="btn_reset_Click" Text="重置" />
  67. </td>
  68. <td>&nbsp;</td>
  69. </tr>
  70. </table>
  71. </ContentTemplate>
  72. </asp:UpdatePanel>
  73. </div>
  74. </form>
  75. </body>
  76. </html>
复制代码

六.效果

会员注册界面:

在这里插入图片描述

当我们输入的用户名存在于数据库中,则提示:
在这里插入图片描述

用户名密码无误,则提示:
在这里插入图片描述

在点击确认后,系统跳转至登录界面(login_new.aspx):
在这里插入图片描述


来源:https://blog.csdn.net/m0_56227168/article/details/122870446
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?会员注册

×
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

QQ|手机版|心飞设计-版权所有:微度网络信息技术服务中心 ( 鲁ICP备17032091号-12 )|网站地图

GMT+8, 2024-12-26 01:10 , Processed in 0.314006 second(s), 26 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表