用户注册信息验证在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="检查用户名是否存在" onclick="checkUsers()"/></div> <div id="checkMsg"></div>
<asp:Button ID="btnReg" runat="server" Text="注册" onclick="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文件的代码:
function checkUsers()
{
var userName = document.getElementById("txtUserName").value;
$(document).ready(function(){
$.ajax({
type:"GET",
url:"CheckUrl.aspx?userName="+userName,
data:null,
success:function(result){
if(result=="UserError")
{ //从CheckUrl.aspx页面中返回的数据为UserError时,表示用户名已经存在!
$("#checkMsg").removeClass("checkRight");
$("#checkMsg").addClass("checkError");
$("#checkMsg").text("用户名已经存在!");
//当输入的用户名已经存在,让注册按钮变灰,不能使用
$("#btnReg").attr("disabled",true);
}
else if (result== "UserRight")
{ //从CheckUrl.aspx页面中返回的数据为UserRight时,表示该用户名还为注册!
$("#checkMsg").removeClass("checkError");
$("#checkMsg").addClass("checkRight");
$("#checkMsg").text("用户名未注册,可用!");
//当输入的用户名未被注册,让注册按钮可使用
$("#btnReg").attr("disabled",false);
}
}
});
});
}
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 C#,采用asp.net和jquery异步方式实现。 用户登录采用模态弹出窗口,异步方式验证登录信息,不刷新页面。 用户注册,能检查用户名和密码是否为空,当用户输入用户名时可采用异步方式从数据库提取...
项目使用的是 ASP.NET Web+SlqServer 开发用于购物,前台模块:登录、注册、首页商品展示,商品搜索,商品...还运用了亮点功能(session、javaScript、Jquery异步交互、文件上传下载),有大量的项目文档;数据库脚本。
asp.net ajax异步上传文件 代码是从一系统中取出来的并作了修改..感觉非常好用,借助此demo还可以实现异步读取信息 验证用户名 更改信息等... 如出现object error错误 请检查function.js submitUrl参数的提交路径...
《asp.net mvc 3高级编程》 第1章 入门 1 1.1 asp.net mvc简介 1 1.1.1 asp.net mvc如何适应asp.net 1 1.1.2 mvc模式简介 2 1.1.3 mvc在web框架中的应用 2 1.1.4 asp.net mvc 3的发展历程 3 1.1.5 razor视图...
调用.net Web 服务来实现与数据库的异步交互… 解决方案:1、首先,我们来设计三个类,分别用来显示Web给用户的视觉感知。它们分别是 .msg_warning{font-family:Arial,Helvetica,sans-serif,simsun; background:#e7...
1、验证插件支持正则表达式验证,函数验证,ajax异步验证,支持对比验证,并支持对表单的自定义属性或指定属性进行验证,应该足矣满足常用软件及网站开发需求。(可根据自己需求,手动添加验证方式) 2、插件支持...
n1349 在一次异步回传中传递额外的信息 n13410 优雅地处理UpdatePanel错误 n13411 UpdatePanel的性能 n135 使用Timer控件 n136 使用UpdateProgress控件 n137 小结 nnbsp n第14章 使用ASPNET AJAX Control Toolkit ...
此外,他还是微软技术方面的专家,精通C#、ASP.NET 和SQL Server等技术,出版相关著作多部。 媒体推荐: jQuery的发展之迅速和取得的成功之巨大是其他所有开发框架都难以企及的,它已经成为Web开发者必备的核心...
【一】需求如下: 1:注册不新开页面,改成弹出层, 2:新增用户买房欲望调查, 3:用户名自动检索出推荐的用户名, 4:出生日期用户输入改成控件选择...script src=”jquery-1.4.2.min.js” type=”text/javascript”
ASP.NET企业网站信息管理系统源码 CMS源码 注意:不带技术支持,有帮助文件,虚拟商品,发货不退,看好再拍。 开发语言 : C# 数据库 : SQL2012 开发工具 : VS2012 源码类型 : WebForm 一、源码特点 采用典型的三...
ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...
-使得Asp.net的控件ImageButton具有和Asp.net的Button控件类似的行为(Ajax提交)(feedback:261629698)。 +TabStrip增加GetAddTabReference和GetRemoveTabReference两个函数,用来向TabStrip控件动态增加删除Tab。...
APPartment是一个ASP.NET Core MVC项目,其最初目的是用作一个平台,在此平台上,室友可以跟踪其公寓/房屋中的所有物品。 后来,目的变成了完全有教育意义的目的。 在项目的整个开发过程中,都进行了许多修改,例如...
当用户发送第一次请求的时候,验证用户登录,创建一个该qq号和服务器端保持通讯连接得线程,启动该通讯线程,通讯完毕,关闭Scoket。 QQ客户端登录界面,中部有三个JPanel,有一个叫选项卡窗口管理。还可以更新...
当用户发送第一次请求的时候,验证用户登录,创建一个该qq号和服务器端保持通讯连接得线程,启动该通讯线程,通讯完毕,关闭Scoket。 QQ客户端登录界面,中部有三个JPanel,有一个叫选项卡窗口管理。还可以更新...