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  要验证的控件的 idDisplay 如果输入通过验证，页面上不预留显示消息的空间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>&nbsp;</td><td>&nbsp;</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语句执行成功,则返回1result = 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>&nbsp;</td></tr></table></ContentTemplate></asp:UpdatePanel></div></form></body>
</html>

六.效果

会员注册界面:

当我们输入的用户名存在于数据库中,则提示:

用户名密码无误,则提示:

在点击确认后,系统跳转至登录界面(login_new.aspx):

ASP.net 简单注册界面相关推荐

HTML作业简单注册界面
一.要求: 1.要有性别.出生年月.所在地区.婚姻状况.身高.学历.月薪 2.手机号.创建密码.昵称.喜欢类型.自我介绍 3.要有超链接.无序列表.标题.button按钮二.运行代码: <!D ...
ASP.net 简单登录界面
一.说明此文是小白在学习张晨光老师的视频教学<<Asp.Net WEB服务器编程技术>>中做的学习笔记,一些知识点也是跟着教程走的,大家也可以去老师的主页去学习,谢谢大家. ...
HTML简单注册界面
## **HTML5实现登录界面** <!DOCTYPE html> <html><head><meta charset="UTF-8"& ...
Android Studio开发：简单的登录注册界面
Android开发:编写简单的登录界面与注册界面 1.登录界面布局 1.1主布局的布局方式是垂直布局,第一个TextView控件在顶部居中布置,显示"用户登录 "字样 <Te ...
python做一个登录注册界面_Python 实现简单的登录注册界面
Python 实现简单的登录注册界面注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...
C# ASP.NET.Web大学课堂登入注册界面实验
先设计注册界面 <style>body{background-color:antiquewhite;}</style> 背景色图像 <div><asp:La ...
python实现简单的登录和注册界面
简单登录注册界面的实现最终实现效果: 完整代码如下: while True:print("英雄商城登陆页面".center(40))print("*" * 4 ...
使用Java编写一个简单的 JFrame登陆注册界面（一）
使用Java awt 及 Swing 组件编写一个简单的JFrame登陆注册界面. 示例: 下面开始介绍如何编写. 通过调用实例化一个JFrame框架,在框架内嵌入JPanel,在JPanel上进行添 ...
html+css+javaScript实现一个简单的注册界面
html+css+javaScript实现一个简单的注册界面自学html,css,js也有一小段时间了,尝试着做点东西来巩固一下,就决定实现这个简单的注册界面.实现的注册界面很普通,没有加上华丽的装 ...
简单的注册界面，点击注册有相应Toast的返回消息
显示注册界面,姓名.学号.专业(下拉框).班级(下拉框).政治面貌(单选按钮).个人爱好(复选框),点击注册后使用Toast提示在界面上输入的信息,要求多使用图文混排. 效果如下: `MainActi ...