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

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

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

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

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

 

 1 Code highlighting produced by Actipro CodeHighlighter (freeware)
 2 http://www.CodeHighlighter.com/
 3 
 4 --><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Jquery.aspx.cs" Inherits="Jquery" %>
 5 
 6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 7 
 8 <html xmlns="http://www.w3.org/1999/xhtml">
 9 <head id="Head1" runat="server">
10 <title>用户验证</title>
11 
12 <%-- 连接需要使用的js文件，jquery.min.js文件为Jquery库文件，jqueryCheck.js文件中写了checkUsers()函数--%>
13 
14 <script src="js/jqueryCheck.js" type="text/javascript"></script>
15 <script src="js/jquery.min.js" type="text/javascript"></script>
16 
17 <%-- 控制验证信息返回结果的样式--%>
18 <link href="css/CheckUser.css" rel="stylesheet" type="text/css" />
19 </head>
20 <body>
21 <form id="form1" runat="server"> 
22 <div class="input"> 用户名：</div> <div class="input"> <input id="txtUserName" type="text" runat="server" /></div>
23 <div class="input"><input id="btnCheck" type="button" value="检查用户名是否存在" onclick="checkUsers()"/></div> <div id="checkMsg"></div>
24 <asp:Button ID="btnReg" runat="server" Text="注册" onclick="btnReg_Click" />
25 <asp:Label ID="lblMsg" runat="server" ForeColor="Red"></asp:Label>
26 </form>
27 </body>
28 </html>



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

 

 1 Code highlighting produced by Actipro CodeHighlighter (freeware)
 2 http://www.CodeHighlighter.com/
 3 
 4 -->using System;
 5 using System.Collections;
 6 using System.Configuration;
 7 using System.Data;
 8 using System.Linq;
 9 using System.Web;
10 using System.Web.Security;
11 using System.Web.UI;
12 using System.Web.UI.HtmlControls;
13 using System.Web.UI.WebControls;
14 using System.Web.UI.WebControls.WebParts;
15 using System.Xml.Linq;
16 
17 using System.Data.SqlClient;
18 
19 public partial class Jquery : System.Web.UI.Page
20 {
21 protected void Page_Load(object sender, EventArgs e)
22 {
23 
24 }
25 protected void btnReg_Click(object sender, EventArgs e)
26 {
27 //在这使用了<input type="text" id="txtUserName" runat="server"/>主要是考虑到可以使 
28 //用 onblur等事件，不一定使用button的onclick事件触发JavaScript文件中函数。 
29 string UserName = txtUserName.Value;
30 //自己到web.config文件中配置ConnStr
31 SqlConnection conn = new SqlConnection(ConfigurationManager.AppSettings["ConnStr"].ToString());
32 conn.Open();
33 try
34 { 
35 //由于自己也在学习存储过程，所以在这都使用存储过程O(∩_∩)O~
36 SqlCommand cmd = new SqlCommand();
37 cmd.Connection = conn;
38 cmd.CommandText = "InsertUser";
39 cmd.CommandType = CommandType.StoredProcedure;
40 cmd.Parameters.Add(new SqlParameter("@UserName", SqlDbType.VarChar, 50));
41 cmd.Parameters["@UserName"].Value = UserName;
42 cmd.ExecuteNonQuery();
43 lblMsg.Text = "注册成功！";
44 }
45 catch (Exception ex)
46 {
47 lblMsg.Text = "注册失败！";
48 }
49 finally
50 {
51 conn.Close();
52 }
53 }
54 }


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

 

 1 Code highlighting produced by Actipro CodeHighlighter (freeware)
 2 http://www.CodeHighlighter.com/
 3 
 4 -->function checkUsers()
 5 {
 6 var userName = document.getElementById("txtUserName").value;
 7 $(document).ready(function(){
 8 $.ajax({
 9 type:"GET",
10 url:"CheckUrl.aspx?userName="+userName,
11 data:null,
12 success:function(result){
13 if(result=="UserError")
14 { //从CheckUrl.aspx页面中返回的数据为UserError时，表示用户名已经存在！
15 $("#checkMsg").removeClass("checkRight");
16 $("#checkMsg").addClass("checkError");
17 $("#checkMsg").text("用户名已经存在！");
18 //当输入的用户名已经存在，让注册按钮变灰，不能使用
19 $("#btnReg").attr("disabled",true);
20 }
21 else if (result== "UserRight")
22 { //从CheckUrl.aspx页面中返回的数据为UserRight时，表示该用户名还为注册！
23 $("#checkMsg").removeClass("checkError");
24 $("#checkMsg").addClass("checkRight");
25 $("#checkMsg").text("用户名未注册，可用！");
26 //当输入的用户名未被注册，让注册按钮可使用
27 $("#btnReg").attr("disabled",false);
28 }
29 }
30 });
31 });
32 }


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

 

 1 Code highlighting produced by Actipro CodeHighlighter (freeware)
 2 http://www.CodeHighlighter.com/
 3 
 4 --><%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckUrl.aspx.cs" Inherits="CheckUrl" %>
 5 
 6 　　后台CheckUrl.aspx.cs页面代码如下：
 7 
 8 
 9 Code highlighting produced by Actipro CodeHighlighter (freeware)
10 http://www.CodeHighlighter.com/
11 
12 -->using System;
13 using System.Collections;
14 using System.Configuration;
15 using System.Data;
16 using System.Linq;
17 using System.Web;
18 using System.Web.Security;
19 using System.Web.UI;
20 using System.Web.UI.HtmlControls;
21 using System.Web.UI.WebControls;
22 using System.Web.UI.WebControls.WebParts;
23 using System.Xml.Linq;
24 using System.Data.SqlClient;
25 
26 public partial class CheckUrl : System.Web.UI.Page
27 {
28 protected void Page_Load(object sender, EventArgs e)
29 {
30 if (!IsPostBack)
31 { 
32 string userName = Request["userName"].ToString();
33 SqlConnection conn = new SqlConnection(ConfigurationManager.AppSettings["ConnStr"].ToString());
34 conn.Open();
35 //继续使用存储过程
36 SqlCommand cmd = new SqlCommand();
37 cmd.Connection = conn;
38 cmd.CommandText = "CheckUser";
39 cmd.CommandType = CommandType.StoredProcedure;
40 cmd.Parameters.Add(new SqlParameter("@UserName", SqlDbType.VarChar, 50));
41 cmd.Parameters["@UserName"].Value = userName;
42 int result = Convert.ToInt32(cmd.ExecuteScalar());
43 if (result > 0)
44 { //上面提到的验证页面返回结果
45 Response.Write("UserError");
46 }
47 else
48 { //上面提到的验证页面返回结果
49 Response.Write("UserRight");
50 }
51 conn.Close();
52 }
53 }
54 }


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

 

 1 Code highlighting produced by Actipro CodeHighlighter (freeware)
 2 http://www.CodeHighlighter.com/
 3 
 4 -->.checkError
 5 {
 6 background-image:url(../images/error.jpg);
 7 padding-left:40px;
 8 font-size:14px;
 9 height:24px;
10 padding-top:6px;
11 background-repeat:no-repeat;
12 float:left;
13 width:160px;
14 }
15 .checkRight
16 {
17 background-image:url(../images/right.jpg);
18 padding-left:40px;
19 font-size:14px;
20 height:24px;
21 padding-top:6px;
22 background-repeat:no-repeat;
23 float:left;
24 width:160px;
25 }
26 .input 
27 {
28 float:left;
29 }


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

 

 1 Code highlighting produced by Actipro CodeHighlighter (freeware)
 2 http://www.CodeHighlighter.com/
 3 
 4 -->CREATE PROCEDURE [dbo].[CheckUser]
 5 @UserName varchar(50)
 6 AS
 7 BEGIN
 8 SELECT count(*) from Users where UserName=@UserName
 9 END
10 
11 CREATE PROCEDURE [dbo].[InsertUser]
12 (
13 @UserName varchar(50)
14 )
15 AS
16 BEGIN
17 INSERT INTO Users (UserName) values(@UserName)
18 END

 

posted on 2012-03-22 19:09  zhangtao1212  阅读(1370)  评论(0)  编辑  收藏  举报

导航