Asp.net+Jquery实现用户信息异步验证

用户注册信息验证在web开发中使用的非常多，只要涉及到用户注册，就会涉及到注册信息的验证。下面将介绍使用Jquery实现用户注册信息的验证，在这我就是以验证用户名是否已经在数据库中存在为例来介绍用户注册信息验证。

在IE和Firefox中运行效果截图：

用户名已经存在：

用户名可以注册：

1、在使用Jquery之前，确认您是否下载了Jquery框架的库文件，如果没有下载可以到Jquery官方网站http://jquery.com/下载最新的版本。

2、这个DEMO使用的开发环境是vs2008+sql server2005,首先新建一个网站，数据库名为Ajax,数据库里只有一个Users表，

3、新建一个Jquery.aspx页面,前端代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Jquery.aspx.cs" Inherits="Jquery" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>用户验证</title>
   <%-- 连接需要使用的js文件，jquery.min.js文件为Jquery库文件，jqueryCheck.js文件中写了checkUsers()函数--%>
   <script src="js/jqueryCheck.js" type="text/javascript"></script>
   <script src="js/jquery.min.js" type="text/javascript"></script>
<%-- 控制验证信息返回结果的样式--%>
   <link href="css/CheckUser.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
       <div class="input"> 用户名：</div> <div class="input"> <input id="txtUserName" type="text" runat="server" /></div>
       <div class="input"><input id="btnCheck" type="button" value="检查用户名是否存在" οnclick="checkUsers()"/></div> <div id="checkMsg"></div>
       <asp:Button ID="btnReg" runat="server" Text="注册" οnclick="btnReg_Click" />
       <asp:Label ID="lblMsg" runat="server" ForeColor="Red"></asp:Label>
    </form>
</body>
</html>

Jquery.aspx.cs 页面代码如下：

代码

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
public partial class Jquery : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
    {
    }
protected void btnReg_Click(object sender, EventArgs e)
    {
//在这使用了<input type="text" id="txtUserName" runat="server"/>主要是考虑到可以使
//用 onblur等事件，不一定使用button的onclick事件触发JavaScript文件中函数。
string UserName = txtUserName.Value;
//自己到web.config文件中配置ConnStr
        SqlConnection conn = new SqlConnection(ConfigurationManager.AppSettings["ConnStr"].ToString());
        conn.Open();
try
        {
//由于自己也在学习存储过程，所以在这都使用存储过程O(∩_∩)O~
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandText = "InsertUser";
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.Add(new SqlParameter("@UserName", SqlDbType.VarChar, 50));
            cmd.Parameters["@UserName"].Value = UserName;
            cmd.ExecuteNonQuery();
            lblMsg.Text = "注册成功！";
        }
catch (Exception ex)
        {
            lblMsg.Text = "注册失败！";
        }
finally
        {
            conn.Close();
        }
    }
}

4、下面是jqueryCheck.js文件的代码：

5、新建一个验证信息处理页面，即jqueryCheck.js页面中调用的CheckUrl.aspx页面，前台页面只留下如下代码即可：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckUrl.aspx.cs" Inherits="CheckUrl" %>

后台CheckUrl.aspx.cs页面代码如下：

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
public partial class CheckUrl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
    {
if (!IsPostBack)
        {
string userName = Request["userName"].ToString();
            SqlConnection conn = new SqlConnection(ConfigurationManager.AppSettings["ConnStr"].ToString());
            conn.Open();
//继续使用存储过程
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandText = "CheckUser";
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.Add(new SqlParameter("@UserName", SqlDbType.VarChar, 50));
            cmd.Parameters["@UserName"].Value = userName;
int result = Convert.ToInt32(cmd.ExecuteScalar());
if (result > 0)
            {   //上面提到的验证页面返回结果
                Response.Write("UserError");
            }
else
            { //上面提到的验证页面返回结果
                Response.Write("UserRight");
            }
            conn.Close();
        }
    }
}

6、控制页面的Css页面代码如下：

.checkError
{
   background-image:url(../images/error.jpg);
   padding-left:40px;
   font-size:14px;
   height:24px;
   padding-top:6px;
   background-repeat:no-repeat;
   float:left;
   width:160px;
}
.checkRight
{
   background-image:url(../images/right.jpg);
   padding-left:40px;
   font-size:14px;
   height:24px;
   padding-top:6px;
   background-repeat:no-repeat;
   float:left;
   width:160px;
}
.input
{
      float:left;
}

7、上面两个文件中涉及到的储存过程代码如下：

CREATE PROCEDURE [dbo].[CheckUser]
@UserName varchar(50)
AS
BEGIN
SELECT count(*) from Users where UserName=@UserName
END
CREATE PROCEDURE [dbo].[InsertUser]
(
@UserName varchar(50)
)
AS
BEGIN
INSERT INTO Users (UserName) values(@UserName)
END

8、这个DEMO的讲解结束。

下面为源代码下载: 源代码中除了使用Jquery，还有一个页面是使用javascript写的。大家也可以参考参考，希望对大家有所帮助，有什么问题大家可以交流交流。

/Files/wanjiabao/Ajax.rar

Asp.net+Jquery实现用户信息异步验证相关推荐

js实现表单及时验证功能用户信息立即验证
问题:表单怎么在输入后立即验证,而不是提交后再验证那么不方便(网上搜到的要么是模棱两可,要么是残缺不全-) 方法:鉴于此,小可,水山奇,将其代码补全,加上小可我个人的理解(注释)在上面,仅供后来者少走 ...
JAAS基于用户身份的验证和授权
JAAS基于用户身份的验证和授权(1) 本文的目录 JAAS介绍登录模块LoginModular 回调处理 JAAS配置文件 ...
使用ASP.NET 2.0 Profile存储用户信息
概要:许多ASP.NET应用程序需要跨访问的用户属性跟踪功能,在ASP.NET1.1中,我们只能人工实现这一功能.但如今,使用 ASP.NET 2.0的Profile对象,这个过程变得异常简单.Ste ...
.NET 实现自定义ContextUser的Identity和Principal实现自定义用户信息，权限验证。
.NET 实现自定义ContextUser的Identity和Principal 在传统的.NET中,我们可以通过 [csharp] view plaincopyprint? User.Identit ...
jwt token 附加用户信息_SpringBoot+JWT实现token验证并将用户信息存储到@注解内
springboot集成jwt实现token验证 1.引入jwt依赖 io.jsonwebtoken jjwt 0.9.0 com.auth0 java-jwt 3.9.0 2.自定义两个注解 /** ...
在ASP.NET 中实现单用户登录(利用Cache, 将用户信息保存在服务器缓存中)[转]
Technorati 标签: asp.net,cache 由于某些原因,在我们的应用中会遇到一个用户只能在一个地方登录的情况,也就是我们通常所说的单点登录.在ASP.NET中实现单点登录其实很简单,下 ...
C#用户进行LDAP验证并返回员工信息
目前多数公司都用windows域管理用户和电脑, 因此在内部应用中,使用LDAP进行用户验证,并返回LDAP的用户信息,如员工工号就十分有意义, 以下是一段关键代码,对LDAP账号密码验证后,返回员工 ...
C# AD域账号登录验证，获取域用户信息
using System; using System.Collections.Generic; using System.Configuration; using System.DirectorySe ...
asp微信登陆源码,实现asp网站授权微信登录(获取用户信息,微信名头像openid等)
一个同学的网站想实现asp微信登陆,获取到微信用户资料信息,微信昵称,微信头像,微信openid等信息保存到数据库,我给他了一份asp微信登录授权(获取用户信息)源码,他说不会用,让我帮忙写好入库,并 ...

Asp.net+Jquery实现用户信息异步验证

Asp.net+Jquery实现用户信息异步验证相关推荐

最新文章

热门文章