写一个asp.net页面,要求实现用户注册,数据验证通过文本框失去焦点后,textbox后的label标签中的*号变成绿色勾勾,数据验证不通过变成红色叉叉
时间: 2023-07-31 11:07:55 浏览: 73
以下是一个简单的 ASP.NET 页面示例,演示如何实现用户注册并进行数据验证。在此示例中,我们使用了 JavaScript 和 jQuery 来处理文本框失去焦点事件。
```html
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="MyWebApp.Register" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>用户注册</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// 当文本框失去焦点时执行验证
$('.required').blur(function () {
if ($(this).val() == '') {
$(this).next('label').html('*<span style="color:red;font-weight:bold;">✖</span>');
}
else {
$(this).next('label').html('*<span style="color:green;font-weight:bold;">✔</span>');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>用户注册</h2>
<hr />
<table>
<tr>
<td><label for="txtUserName">用户名:</label></td>
<td><asp:TextBox ID="txtUserName" runat="server" CssClass="required"></asp:TextBox><label>*</label></td>
</tr>
<tr>
<td><label for="txtPassword">密码:</label></td>
<td><asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="required"></asp:TextBox><label>*</label></td>
</tr>
<tr>
<td><label for="txtConfirmPassword">确认密码:</label></td>
<td><asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password" CssClass="required"></asp:TextBox><label>*</label></td>
</tr>
<tr>
<td><label for="txtEmail">电子邮箱:</label></td>
<td><asp:TextBox ID="txtEmail" runat="server" CssClass="required"></asp:TextBox><label>*</label></td>
</tr>
<tr>
<td colspan="2"><asp:Button ID="btnRegister" runat="server" Text="注册" OnClick="btnRegister_Click" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
```
在上面的代码中,我们使用了 CSS 类 `required` 来标识需要验证的文本框。当文本框失去焦点时,我们使用 jQuery 选择器 `$('.required')` 来选中所有需要验证的文本框,并为它们绑定 `blur` 事件。在事件处理程序中,我们首先检查文本框的值是否为空,如果为空,则将标签中的 `*` 号和叉叉改为红色;否则,将其改为绿色勾勾。
在 ASP.NET 代码中,我们需要处理注册按钮的点击事件。在这个示例中,我们假设用户输入的用户名、密码和电子邮箱都不能空,并且密码和确认密码必须相同。如果数据验证通过,则将用户信息保存到数据库中。
```csharp
using System;
using System.Configuration;
using System.Data.SqlClient;
namespace MyWebApp
{
public partial class Register : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnRegister_Click(object sender, EventArgs e)
{
// 检查用户名、密码和电子邮箱是否为空
if (string.IsNullOrEmpty(txtUserName.Text) ||
string.IsNullOrEmpty(txtPassword.Text) ||
string.IsNullOrEmpty(txtEmail.Text))
{
Response.Write("<script>alert('用户名、密码和电子邮箱不能为空!');</script>");
return;
}
// 检查密码和确认密码是否相同
if (txtPassword.Text != txtConfirmPassword.Text)
{
Response.Write("<script>alert('密码和确认密码不一致!');</script>");
return;
}
// 保存用户信息到数据库中
string connectionString = ConfigurationManager.ConnectionStrings["MyDbConn"].ConnectionString;
using (SqlConnection conn = new SqlConnection(connectionString))
{
conn.Open();
SqlCommand cmd = new SqlCommand("INSERT INTO Users (UserName, Password, Email) VALUES (@UserName, @Password, @Email)", conn);
cmd.Parameters.AddWithValue("@UserName", txtUserName.Text);
cmd.Parameters.AddWithValue("@Password", txtPassword.Text);
cmd.Parameters.AddWithValue("@Email", txtEmail.Text);
cmd.ExecuteNonQuery();
Response.Write("<script>alert('注册成功!');</script>");
}
}
}
}
```
在上面的代码中,我们首先检查用户名、密码和电子邮箱是否为空,如果是,则弹出一个警告框并返回。然后,我们检查密码和确认密码是否相同。如果不相同,则也弹出一个警告框并返回。最后,我们使用 ADO.NET 将用户信息保存到数据库中。需要注意的是,我们假设数据库连接字符串已经在 Web.config 文件中定义好了。如果没有定义,则需要添加一个类似下面的配置节:
```xml
<connectionStrings>
<add name="MyDbConn" connectionString="Data Source=.;Initial Catalog=MyDatabase;Integrated Security=True" providerName="System.Data.SqlClient" />
</connectionStrings>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)