主要技术点:jquery ajax以及blur事件

当用户名输入框失去焦点的时候就会触发blur事件,然后进行ajax请求,获得结果(true或者false),如果请求结果为true,就把用户名输入框图片替换成ok,并且输出文字:恭喜您, 这个帐号可以注册,否则就替换成图片no,并且输出文字:账号已存在

源代码:

前台:
代码如下:

<%@ Page Language="C#" MasterPageFile="~/Top_Down.master" AutoEventWireup="true" CodeFile="RegisterMember.aspx.cs"Inherits="Member_RegisterMember" Title="注册用户" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
<link href="../Admin/css/template.css" rel="stylesheet" type="text/css" /> 
<link href="../Admin/css/validationEngine.jquery.css" rel="stylesheet" type="text/css" /> 
<script src="../Admin/scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script src="../js/jquery.validationEngine.js" type="text/javascript"></script> 
<script src="../Admin/scripts/isValid.js" type="text/javascript"></script> 
<script src="../js/languages/jquery.validationEngine-zh_CN.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var IsCheck=false; 
$(function(){ 
// binds form submission and fields to the validation engine 
$("#form1").validationEngine(); 
//当鼠标失去焦点的时候验证 
$("#txtUserName").blur(function(){ 
$.ajax({ 
url:"Data/GetMemberInfo.ashx?method=CheckExistUserName", 
data:{"username":$("#txtUserName").val()}, 
type:"post", 
success:function(text){ 
$("#tdUser").empty();//清空内容 
var item; 
if(text=="True"){ 
item='<img src="../images/ok.png"/>恭喜您,这个帐号可以注册!'; 
IsCheck=true; 
} 
else 
item='<img src="../images/no.png"/>对不起,这个帐号已经有人注册了!'; 
$("#tdUser").append(item); 
} 
}); 
}); 
}); 
function CheckForm1() 
{ 
if(IsCheck) 
{ 
form1.submit(); 
} 
else{ 
alert("请验证用户名"); 
} 
} 
</script> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
<form id="form1" action="Data/GetMemberInfo.ashx?method=SaveMemberInfo" method="post"> 
<div class="content"> 
<div class="left_side"> 
<div class="logo_bottom"></div> 
</div> 
<div class="right_side zhuce"> 
<div class="zhuce_title"><p class="hide">注册新用户</p></div> 
<div class="zhuce_p"> 
<table width="578" class="zc_table1"> 
<tr> 
<td width="93" class="zc_tar">用户名：</td> 
<td width="200" class="zc_tal"><input type="text" class="zc_input1 validate[required,custom[LoginName]] text-input"name="txtUserName" id="txtUserName"/><!--LoginName--> 
</td> 
<td width="269" class="zc_font" id="tdUser"></td> 
</tr> 
<tr> 
<td class="zc_tar">密码：</td> 
<td class="zc_tal"><input type="password" class="zc_input2 validate[required,custom[LoginPwd]] text-input" id="txtPwd"name="txtPwd"/></td> 
<td class="zc_font"></td> 
</tr> 
<tr> 
<td class="zc_tar">确认密码：</td> 
<td class="zc_tal"><input type="password" class="zc_input3 validate[required,equals[txtPwd] text-input" /></td> 
<td class="zc_font"></td> 
</tr> 
<tr> 
<td class="zc_tar">E-mail：</td> 
<td class="zc_tal"><input type="text" class="zc_input4 validate[required,custom[email] text-input" name="txtEmail"id="txtEmail"/></td> 
<td class="zc_font"></td> 
</tr> 
<tr> 
<td class="zc_tar">验证码：</td> 
<td class="zc_tal" colspan="2"><input type="text" class="zc_input5" name="txtCheckCode" id="txtCheckCode"/><imgsrc="../Admin/FileManage/VerifyChars.ashx" 验证码" /></td> 
</tr> 
<tr><td> </td></tr> 
<tr> 
<td colspan="3" align="center"><a href="javascript:CheckForm1()"><img src="../images/zhuce_sumbit.png" /></a></td> 
</tr> 
</table> 
</div> 
</div> 
</div> 
</form> 
</asp:Content> 
 
后台事件: 
 代码如下:

<%@ WebHandler Language="C#" Class="GetMemberInfo" %> 
using System; 
using System.Web; 
using Common; 
using czcraft.Model; 
using czcraft.BLL; 
using System.Web.SessionState; 
public class GetMemberInfo : IHttpHandler,IRequiresSessionState 
{ 
// //记录日志 
private static readonly log4net.ILog logger =log4net.LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType); 
public void ProcessRequest(HttpContext context) 
{ 
String methodName = context.Request["method"]; 
if (!string.IsNullOrEmpty(methodName)) 
CallMethod(methodName, context); 
} 
/// <summary> 
/// 根据业务需求调用不同的方法 
/// </summary> 
/// <param name="Method">方法</param> 
/// <param name="context">上下文</param> 
public void CallMethod(string Method, HttpContext context) 
{ 
switch (Method) 
{ 
case "CheckExistUserName": 
CheckExistUserName(context); 
break; 
//case "SearchMember": 
// SearchMember(context); 
// break; 
case "SaveMemberInfo": 
SaveMemberInfo(context); 
break; 
//case "RemoveMember": 
// RemoveMember(context); 
// break; 
//case "GetMember": 
// GetMember(context); 
// break; 
default: 
return; 
} 
} 
/// <summary> 
/// 验证帐号是否存在 
/// </summary> 
/// <param name="context"></param> 
public void CheckExistUserName(HttpContext context) 
{ 
string username = context.Request["username"]; 
if (Tools.IsValidInput(ref username, true)) 
{ 
context.Response.Write(new memberBLL().CheckExistUserName(username)); 
} 
} 
/// <summary> 
/// 保存用户信息 
/// </summary> 
/// <param name="context"></param> 
public void SaveMemberInfo(HttpContext context) 
{ 
try 
{ 
//表单读取 
string txtUserName = context.Request["txtUserName"]; 
string txtPwd = context.Request["txtPwd"]; 
string txtEmail = context.Request["txtEmail"]; 
string txtCheckCode = context.Request["txtCheckCode"]; 
//验证码校验 
if (!txtCheckCode.Equals(context.Session["checkcode"].ToString())) 
{ 
return; 
} 
//字符串sql注入检测 
if (Tools.IsValidInput(ref txtUserName, true) && Tools.IsValidInput(ref txtPwd, true) && Tools.IsValidInput(ref txtEmail, true)) 
{ 
member info = new member(); 
info.username = txtUserName; 
info.password = txtPwd; 
info.Email = txtEmail; 
info.states = "0"; 
if (new memberBLL().AddNew(info) > 0) 
{ 
SMTP smtp = new SMTP(info.Email); 
string webpath = context.Request.Url.Scheme + "://" + context.Request.Url.Authority + "/Default.aspx"; 
smtp.Activation(webpath, info.username);//发送激活邮件 
JScript.AlertAndRedirect("注册用户成功!!", "../Default.aspx"); 
} 
else { 
JScript.AlertAndRedirect("注册用户失败!", "../Default.aspx"); 
} 
} 
} 
catch (Exception ex) 
{ 
logger.Error("错误!", ex); 
} 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
} 

 
 




下载本文