基于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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
JavaScript实现分页效果
Mar 28 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
微信小程序文章列表功能完整实例
Jun 03 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入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
python简单判断序列是否为空的方法
2015/06/30 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
基于python实现对文件进行切分行
2020/04/26 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
十八大闭幕感言
2014/01/22 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
小学生植树节活动总结
2014/07/04 职场文书
改造DE1103三步曲
2022/04/07 无线电
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS