基于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 相关文章推荐
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
微信小程序页面渲染实现方法
Nov 06 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
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
python str与repr的区别
2013/03/23 Python
Python如何实现文本转语音
2016/08/08 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
python实现名片管理器的示例代码
2019/12/17 Python
Python新手学习函数默认参数设置
2020/06/03 Python
Python pip 常用命令汇总
2020/10/19 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
python如何修改文件时间属性
2021/02/05 Python
露营世界:Camping World
2017/02/02 全球购物
学生会副主席竞聘书
2014/03/31 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
雷峰塔导游词
2015/02/09 职场文书
秋菊打官司观后感
2015/06/03 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android