基于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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
JavaScript获取GridView选择的行内容
Apr 14 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
JavaScript实现滑动导航栏效果
Aug 30 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 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
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
对Session和Cookie的区分与解释
2007/03/16 PHP
PHP PDO函数库详解
2010/04/27 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
python笔记:mysql、redis操作方法
2017/06/28 Python
python主线程捕获子线程的方法
2018/06/17 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Django框架验证码用法实例分析
2019/05/10 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
会计学专业学生的求职信范文
2014/01/27 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
超市活动计划书
2014/04/24 职场文书
团日活动总结
2014/04/28 职场文书
努力学习保证书
2015/02/26 职场文书