基于jquery+thickbox仿校内登录注册框


Posted in Javascript onJune 07, 2010

下面将我用thickbox和css实现校内登录(注册)框与大家分享下-----》效果图如下:
基于jquery+thickbox仿校内登录注册框
基于jquery+thickbox仿校内登录注册框
基于jquery+thickbox仿校内登录注册框
方法很简单,就是用thickbox的iframe模式,将另一个页面嵌套即可,然后在这个页面里写ajax来实现相应的功能。
代码:
注册:regUser.html

<link type="text/css" href="css/reg.css" rel="Stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$().ready(function () { 
var validate = true; 
//检查用户名是否可用 
$('#userid').blur(function () { 
$.ajax({ 
type: "POST", 
url: "Ajax/UserAjax.aspx?action=check", 
data: "userid=" + escape($('#userid').val()), 
success: function (msg) { 
if (msg == "success") { 
//通过验证 
validate = true; 
$('#username').css("display", "none"); 
} 
if (msg == "fail") { 
validate = false; //没有通过验证 
//alert("用户名重名!"); 
$('#username').css("display", "inline"); 
} 
} 
}); 
}); 
$('#createUser').click(function () { 
if ($('#userid').val() == "") { 
validate = false; 
alert("用户名不能为空!"); 
return; 
} 
if ($('#userpwd').val() == "") { 
validate = false; 
alert("密码不能为空!"); 
return; 
} 
if ($('#email').val() == "") { 
validate = false; 
alert("Email不能为空!"); 
return; 
} 
if (!isEmail($('#email').val())) { 
validate = false; 
alert("Email格式不正确!"); 
return; 
} 
if (validate) { 
$.ajax({ 
type: "POST", 
url: "Ajax/UserAjax.aspx?action=reg", 
data: "userid=" + escape($('#userid').val()) + "&userpwd=" + escape($('#userpwd').val()) + "&email=" + escape($('#email').val()), 
success: function (msg) { 
if (msg == "success") { 
alert("注册成功"); 
} 
if (msg == "fail") { 
alert("注册失败!"); 
} 
} 
}); 
} 
}); 
}); 
function isEmail(str) { 
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; 
return reg.test(str); 
} 
</script> 
<div class="box" style="width:280px ; height:230px;"> 
<h1> 
注册</h1> 
<p> 
新用户?马上注册</p> 
<form action="" method="post"> 
<label> 
<span>用户名</span> 
<input type="text" id="userid" class="input-text" /> 
<b id="username" style="display:none; color:Red; display:none">不可用</b> 
</label> 
<label> 
<span>E-mail</span> 
<input type="text" id="email" class="input-text" /> 
</label> 
<label> 
<span>密码</span> 
<input type="password" id="userpwd" class="input-text" /> 
</label> 
</form> 
<div class="spacer"> 
<a href="#" id="createUser" class="green">创建新的账号</a></div> 
<div class="spacer"> 
已经注册过,返回登录 <a href="#" onclick="parent.tb_remove()">返回登录</a> 
</div> 
</div>

用户登录:
<link type="text/css" rel="Stylesheet" href="css/login.css" /> 
<link type="text/css" rel="Stylesheet" href="css/thickbox.css" /> 
<script type="text/javascript" src="js/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="js/thickbox.js"></script> 
<script type="text/javascript"> 
$().ready(function () { 
//使用ajax进行用户登录,如果登录成功则写入session 
$('#userLogin').click(function () { 
if ($('#userid').val() == "" || $('#userpwd').val() == "") { 
alert("用户名或密码不能为空!"); 
} 
else { 
$.ajax({ 
type: "POST", 
url: "Ajax/UserAjax.aspx?action=login", 
data: "userid=" + escape($('#userid').val()) + "&userpwd=" + escape($('#userpwd').val()), 
success: function (msg) { 
if (msg == "success") { 
//alert('登录成功'); 
//document.location.href = "Default.aspx"; 
$('#divLogin').css("display", "none"); 
var welcome = "欢迎" + $('#userid').val() + ",<a href='Ajax/CommonAjax.aspx?action=logout'>退出</a>"; 
$('#tempInfo').css("display", "block"); 
$('#tempInfo').html(welcome); 
} 
if (msg == "fail") { 
alert("登录失败!"); 
} 
} 
}); 
} 
}); 
}); 
</script> 
<!--登录区域--> 
<%if (Session["User"] == null) 
{ %> 
<div class="box" id="divLogin"> 
<h1> 
登 录</h1> 
<form action="" method="post"> 
<label> 
<span>账号</span> 
<input type="text" name="email" id="userid" style="height: 20px; font-size: 16px; 
width: 120px" class="input-text" /> 
</label> 
<label> 
<span>密码</span> 
<input type="password" name="psw" id="userpwd" style="height: 20px; font-size: 16px; 
width: 120px" class="input-text" /> 
</label> 
</form> 
<div class="spacer"> 
<a href="javascript:;" id="userLogin" class="green" style="background: #67a54b; color: #FFFFFF; 
text-decoration: none">  登  录  </a></div> 
<div class="spacer"> 
忘记密码? <a href="FindPwd.htm?KeepThis=true&TB_iframe=true&height=250&width=300&modal=true" 
class="thickbox" style="color: #0033CC; background: #dfe4ee;">找回密码</a><br /> 
还没有注册? <a href="UserReg.htm?KeepThis=true&TB_iframe=true&height=250&width=350&modal=true" 
style="color: #0033CC; background: #dfe4ee;" class="thickbox">注册</a> 
</div> 
</div> 
<%} 
else 
{ %> 
<div id="divUserInfo" style=" height:80px;"> 
欢迎, <%=Session["User"].ToString() %>,<a href="Ajax/CommonAjax.aspx?action=logout">退出</a> 
</div> 
<%} %> 
<div id="tempInfo" style="height:80px; display:none"> 
</div>

以上涉及到的css文件和ajax处理页面如下:
reg.css,login.css,UserAjax.rar 打包下载地址
至于thickbox的相关资料可以去官方网站去下载
Javascript 相关文章推荐
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
js中数组的常用方法小结
Dec 30 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
jquery 注意事项与常用语法小结
Jun 07 #Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 #Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 #Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 #Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 #Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 #Javascript
利用jquery操作select下拉列表框的代码
Jun 04 #Javascript
You might like
由php的call_user_func传reference引发的思考
2010/07/23 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
使用python实现strcmp函数功能示例
2014/03/25 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
python中字符串内置函数的用法总结
2018/09/13 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
python程序变成软件的实操方法
2019/06/24 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
大学生涯自我鉴定
2014/01/16 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
实验教师岗位职责
2014/02/13 职场文书
财务总监管理职责范文
2014/03/09 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
个人自我鉴定总结
2014/03/25 职场文书
反四风对照检查材料
2014/09/22 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python