• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

用户注册信息验证在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" >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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
asp.net中的比较完美的验证码发布时间:2022-07-10
下一篇:
在asp.netmvc中导出Excel文件发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap