< script language = " javascript " type = " text/javascript " >
$( ' #<%=this.lnkLogin.ClientID %> ' ).click(
function (){
jBox.open( ' iframe-jBoxID ' , ' iframe ' , ' Login.aspx ' , ' 用户登录
' , ' width=400,height=250,center=true,draggable=true,model=true ' );
} );
< / script>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
< form id ="form1" onsubmit ="return false;" >
< table id ="login-table" >
< tr >
< td width ="60" > 学号: </ td >
< td >< input class ="textbox" type ="text" style ="width:160px;" id ="txtUserName"
maxlength ="9" onblur ="checkUserName()" onclick ="$.trim(this.value)" />< span ></ span >
</ td >
</ tr >
< tr >
< td width ="60" > 密码: </ td >
< td >< input class ="textbox" type ="password" style ="width:160px;" id ="txtUserPwd"
onblur ="checkUserPwd()" onclick ="$.trim(this.value)" />< span ></ span >
</ td >
</ tr >
< tr >
< td width ="60" > 验证码: </ td >
< td >< input class ="textbox" type ="text" style ="width:160px;" maxlength ="5"
id ="txtCheckCode" onblur ="checkCheckCode()" onclick ="$.trim(this.value)" />< span >
</ span >
</ td >
</ tr >
< tr >
< td width ="60" ></ td >
< td >< div style ="color:#808080;" > 输入下图中的字符,不区分大小写 </ div >< br />
< img src ="CheckCode.aspx" style ="vertical-align:middle;" alt ="验证码" id ="imgCheckCode" />
< a href ="#" id ="change_image" > 看不清,换一张 </ a ></ td >
</ tr >
< tr >
< td width ="60" ></ td >
< td >< input type ="image" src ="App_Themes/Images/btn_login.jpg" id ="btnLogin"
alt ="马上登录" style ="border:0;" /></ td >
</ tr >
</ table >
</ form >
jQuery代
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
< script language = " javascript " type = " text/javascript " >
$(document).ready( function (){
// 验证码更新
$( ' #change_image ' ).click(
function (){
$( ' #imgCheckCode ' ).attr( ' src ' , ' CheckCode.aspx? ' + Math.random());
});
// 关键的代码
$( " #btnLogin " ).click( function (){
if (checkUserName() && checkUserPwd() && checkCheckCode())
{
var data = {
UserName: $( ' #txtUserName ' ).val(),
UserPwd: $( ' #txtUserPwd ' ).val(),
CheckCode: $( ' #txtCheckCode ' ).val()
};
// 提交数据给Login.ashx页面处理
$.post( " Ajax/Login.ashx " ,data, function (result){
if (result == " 1 " ) // 登录成功
{
alert( " 登录成功!您可以进行其他操作了! " );
// 关闭模拟窗口
window.parent.window.jBox.close();
}
else if (result == " 2 " ) // 验证码错误
{
$( ' #txtCheckCode ' ).next( " span " ).css( " color " , " red " ).text( " *
验证码错误 " );
}
else
{
alert( " 登录失败!请重试 " );
}
});
}
else
{
checkUserName();
checkUserPwd();
checkCheckCode();
}
});
});
// check the userName
function checkUserName()
{
if ($( " #txtUserName " ).val().length == 0 )
{
$( " #txtUserName " ).next( " span " ).css( " color " , " red " ).text( " *用户名不为空 " );
return false ;
}
else
{
var reg = / ^\d{9}$ / ;
if ( ! reg.test($( ' #txtUserName ' ).val()))
{
$( ' #txtUserName ' ).next( " span " ).css( " color " , " red " ).text( " *正确的格式
如:030602888 " );
return false ;
}
else
{
$( " #txtUserName " ).next( " span " ).css( " color " , " red " ).text( "" );
return true ;
}
}
}
// check the pwd
function checkUserPwd()
{
if ($( ' #txtUserPwd ' ).val().length == 0 )
{
$( ' #txtUserPwd ' ).next( " span " ).css( " color " , " red " ).text( " *密码不为空 " );
return false ;
}
else
{
$( ' #txtUserPwd ' ).next( " span " ).css( " color " , " red " ).text( "" );
return true ;
}
}
// check the check code
function checkCheckCode()
{
if ($( ' #txtCheckCode ' ).val().length == 0 )
{
$( ' #txtCheckCode ' ).next( " span " ).css( " color " , " red " ).text( " *验证码不为空 " );
return false ;
}
else
{
$( ' #txtCheckCode ' ).next( " span " ).css( " color " , " red " ).text( "" );
return true ;
}
}
< / script>
主页面调用代码片段:
复制代码 代码如下:
<asp:HyperLink ID="lnkLogin" runat="server" NavigateUrl="#" >登录</asp:HyperLink>
<script language="javascript" type="text/javascript">
$('#<%=this.lnkLogin.ClientID %>').click(
function(){
jBox.open('iframe-jBoxID','iframe','Login.aspx','用户登录
','width=400,height=250,center=true,draggable=true,model=true');
} );
</script>
Login.aspx代码:
复制代码 代码如下:
<form id="form1" οnsubmit="return false;">
<table id="login-table">
<tr>
<td width="60">学号:</td>
<td><input class="textbox" type="text" style="width:160px;" id="txtUserName"
maxlength="9" οnblur="checkUserName()" οnclick="$.trim(this.value)"/><span></span>
</td>
</tr>
<tr>
<td width="60">密码:</td>
<td><input class="textbox" type="password" style="width:160px;" id="txtUserPwd"
οnblur="checkUserPwd()" οnclick="$.trim(this.value)" /><span></span>
</td>
</tr>
<tr>
<td width="60">验证码:</td>
<td><input class="textbox" type="text" style="width:160px;" maxlength="5"
id="txtCheckCode" οnblur="checkCheckCode()" οnclick="$.trim(this.value)"/><span>
</span>
</td>
</tr>
<tr>
<td width="60"></td>
<td><div style="color:#808080;">输入下图中的字符,不区分大小写</div><br />
<img src="CheckCode.aspx" style="vertical-align:middle;" alt="验证码" id="imgCheckCode" />
<a href="#" id="change_image">看不清,换一张</a></td>
</tr>
<tr>
<td width="60"></td>
<td><input type="image" src="App_Themes/Images/btn_login.jpg" id="btnLogin"
alt="马上登录" style="border:0;"/></td>
</tr>
</table>
</form>
jQuery代码:
复制代码 代码如下:
<script language="javascript" type="text/javascript" >
$(document).ready(function(){
// 验证码更新
$('#change_image').click(
function(){
$('#imgCheckCode').attr('src','CheckCode.aspx?'+Math.random());
});
//关键的代码
$("#btnLogin").click(function(){
if(checkUserName() && checkUserPwd() && checkCheckCode())
{
var data = {
UserName: $('#txtUserName').val(),
UserPwd: $('#txtUserPwd').val(),
CheckCode: $('#txtCheckCode').val()
};
//提交数据给Login.ashx页面处理
$.post("Ajax/Login.ashx",data,function(result){
if(result == "1") //登录成功
{
alert("登录成功!您可以进行其他操作了!");
// 关闭模拟窗口
window.parent.window.jBox.close();
}
else if(result == "2") //验证码错误
{
$('#txtCheckCode').next("span").css("color","red").text("*
验证码错误");
}
else
{
alert("登录失败!请重试");
}
});
}
else
{
checkUserName();
checkUserPwd();
checkCheckCode();
}
});
});
//check the userName
function checkUserName()
{
if($("#txtUserName").val().length == 0)
{
$("#txtUserName").next("span").css("color","red").text("*用户名不为空");
return false;
}
else
{
var reg = /^\d{9}$/;
if(!reg.test($('#txtUserName').val()))
{
$('#txtUserName').next("span").css("color","red").text("*正确的格式
如:030602888");
return false;
}
else
{
$("#txtUserName").next("span").css("color","red").text("");
return true;
}
}
}
//check the pwd
function checkUserPwd()
{
if($('#txtUserPwd').val().length == 0)
{
$('#txtUserPwd').next("span").css("color","red").text("*密码不为空");
return false;
}
else
{
$('#txtUserPwd').next("span").css("color","red").text("");
return true;
}
}
// check the check code
function checkCheckCode()
{
if($('#txtCheckCode').val().length == 0)
{
$('#txtCheckCode').next("span").css("color","red").text("*验证码不为空");
return false;
}
else
{
$('#txtCheckCode').next("span").css("color","red").text("");
return true;
}
}
</script>
Login.ashx代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Web.SessionState; // 支持session必须的引用
namespace Website.Ajax
{
[WebService(Namespace = " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Login : IHttpHandler,IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = " text/plain " ;
string checkCode = "" ;
if (context.Session[ " checkCode " ] != null )
{
checkCode = Convert.ToString(context.Session[ " checkCode " ]).ToLower();
}
if (context.Request.Form[ " CheckCode " ].ToLower() == checkCode)
{
using (SqlConnection conn = new SqlConnection(SqlHelper.StudentConnectionString))
{
string sql = " select ID,stuNumber,userPassword,realName from t_stuUser
where stuNumber = @UserName and userPassword = @UserPwd " ;
SqlCommand cmd = new SqlCommand(sql, conn);
SqlParameter pUserName = cmd.Parameters.Add( " @UserName " , SqlDbType.VarChar, 30 );
SqlParameter pUserPwd = cmd.Parameters.Add( " @UserPwd " , SqlDbType.VarChar, 150 );
pUserName.Value = context.Request.Form[ " UserName " ];
pUserPwd.Value = Common.MD5(context.Request.Form[ " UserPwd " ]);
conn.Open();
SqlDataReader sdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
if (sdr.Read())
{
context.Session[ " UserID " ] = Convert.ToString(sdr[ " ID " ]);
context.Session[ " StuName " ] = Convert.ToString(sdr[ " realName " ]);
context.Session[ " StuNumber " ] = Convert.ToString(sdr[ " stuNumber " ]);
context.Response.Write( " 1 " ); // 登录成功
}
else
{
context.Response.Write( " 0 " ); // 登录失败,用户名或密码错误
}
}
}
else
{
context.Response.Write( " 2 " ); // 验证码错误
}
}
public bool IsReusable
{
get
{
return false ;
}
}
}
}