基于jquery+thickbox仿校內(nèi)登錄注冊(cè)框
更新時(shí)間:2010年06月07日 22:05:19 作者:
近日,客戶說他想要個(gè)類似于人人網(wǎng)(以前為校內(nèi))的登錄框效果,于是上網(wǎng)搜了下,發(fā)現(xiàn)有一個(gè)仿得比較好的,于是就拿過來用了用。
下面將我用thickbox和css實(shí)現(xiàn)校內(nèi)登錄(注冊(cè))框與大家分享下-----》效果圖如下:



方法很簡(jiǎn)單,就是用thickbox的iframe模式,將另一個(gè)頁面嵌套即可,然后在這個(gè)頁面里寫ajax來實(shí)現(xiàn)相應(yīng)的功能。
代碼:
注冊(cè):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") {
//通過驗(yàn)證
validate = true;
$('#username').css("display", "none");
}
if (msg == "fail") {
validate = false; //沒有通過驗(yàn)證
//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("注冊(cè)成功");
}
if (msg == "fail") {
alert("注冊(cè)失??!");
}
}
});
}
});
});
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>
注冊(cè)</h1>
<p>
新用戶?馬上注冊(cè)</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">創(chuàng)建新的賬號(hào)</a></div>
<div class="spacer">
已經(jīng)注冊(cè)過,返回登錄 <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進(jìn)行用戶登錄,如果登錄成功則寫入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>
<!--登錄區(qū)域-->
<%if (Session["User"] == null)
{ %>
<div class="box" id="divLogin">
<h1>
登 錄</h1>
<form action="" method="post">
<label>
<span>賬號(hào)</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 />
還沒有注冊(cè)? <a href="UserReg.htm?KeepThis=true&TB_iframe=true&height=250&width=350&modal=true"
style="color: #0033CC; background: #dfe4ee;" class="thickbox">注冊(cè)</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的相關(guān)資料可以去官方網(wǎng)站去下載



方法很簡(jiǎn)單,就是用thickbox的iframe模式,將另一個(gè)頁面嵌套即可,然后在這個(gè)頁面里寫ajax來實(shí)現(xiàn)相應(yīng)的功能。
代碼:
注冊(cè):regUser.html
復(fù)制代碼 代碼如下:
<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") {
//通過驗(yàn)證
validate = true;
$('#username').css("display", "none");
}
if (msg == "fail") {
validate = false; //沒有通過驗(yàn)證
//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("注冊(cè)成功");
}
if (msg == "fail") {
alert("注冊(cè)失??!");
}
}
});
}
});
});
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>
注冊(cè)</h1>
<p>
新用戶?馬上注冊(cè)</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">創(chuàng)建新的賬號(hào)</a></div>
<div class="spacer">
已經(jīng)注冊(cè)過,返回登錄 <a href="#" onclick="parent.tb_remove()">返回登錄</a>
</div>
</div>
用戶登錄:
復(fù)制代碼 代碼如下:
<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進(jìn)行用戶登錄,如果登錄成功則寫入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>
<!--登錄區(qū)域-->
<%if (Session["User"] == null)
{ %>
<div class="box" id="divLogin">
<h1>
登 錄</h1>
<form action="" method="post">
<label>
<span>賬號(hào)</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 />
還沒有注冊(cè)? <a href="UserReg.htm?KeepThis=true&TB_iframe=true&height=250&width=350&modal=true"
style="color: #0033CC; background: #dfe4ee;" class="thickbox">注冊(cè)</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的相關(guān)資料可以去官方網(wǎng)站去下載
您可能感興趣的文章:
- iOS+PHP注冊(cè)登錄系統(tǒng) PHP部分(上)
- iOS簡(jiǎn)單登錄LoginViewController、注冊(cè)RegisterViewController等功能實(shí)現(xiàn)方法
- IOS開發(fā)用戶登錄注冊(cè)模塊所遇到的問題
- Laravel實(shí)現(xiàn)用戶注冊(cè)和登錄
- ThinkPHP之用戶注冊(cè)登錄留言完整實(shí)例
- JavaWeb實(shí)現(xiàn)用戶登錄注冊(cè)功能實(shí)例代碼(基于Servlet+JSP+JavaBean模式)
- ASP.NET登錄注冊(cè)頁面實(shí)現(xiàn)
- JSP實(shí)現(xiàn)用戶登錄、注冊(cè)和退出功能
- 用Python實(shí)現(xiàn)web端用戶登錄和注冊(cè)功能的教程
- 圖文演示Flash+ASP實(shí)現(xiàn)用戶登錄/注冊(cè)程序
- iOS+PHP注冊(cè)登錄系統(tǒng) iOS部分(下)
相關(guān)文章
JQuery報(bào)錯(cuò)Uncaught TypeError: Illegal invocation的處理方法
這篇文章主要介紹了JQuery報(bào)錯(cuò)"Uncaught TypeError: Illegal invocation"的處理方法,需要的朋友可以參考下2015-03-03jquery實(shí)現(xiàn)進(jìn)度條狀態(tài)展示
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)進(jìn)度條狀態(tài)展示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03jQuery實(shí)現(xiàn)表格元素動(dòng)態(tài)創(chuàng)建功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格元素動(dòng)態(tài)創(chuàng)建功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01jquery 動(dòng)態(tài)合并單元格的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query 動(dòng)態(tài)合并單元格的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08