PHP+jQuery 注冊模塊的改進(二):郵箱激活第1/2頁
接《PHP+jQuery 注冊模塊的改進之一》繼續(xù)修改:
①在注冊成功后返回登錄郵件頁面( maillogin.php ),在頁面中用戶可以點擊鏈接跳轉到自己注冊郵箱的登錄頁面,可以再次發(fā)送激活鏈接;
②給激活鏈接設置有效期,過了有效期點擊激活連接,會跳轉頁面讓用戶選擇再次發(fā)送郵件或者返回注冊頁;再次發(fā)送郵件后,進郵箱點擊鏈接激活;
③點擊重新發(fā)送激活連接,不跳轉頁面,在當前頁無刷新彈出通知:已重新發(fā)送鏈接,幾秒鐘之后通知消失;
④點擊更換收件郵箱,跳轉至注冊頁
1.點擊郵箱鏈接跳轉至相應郵箱登陸界面
思路:
在maillogin.js中( 也可在php中設置 )設置常用郵件地址列表,當用戶的注冊郵箱和列表中的郵箱匹配時,則顯示button"立即登錄驗證郵箱",點擊則跳轉至郵箱的登陸首頁;如果用戶注冊的郵箱在列表中不存在時,則不顯示登陸button。
如圖,當郵箱列表中存在注冊郵箱時:

當郵箱列表中不存在注冊郵箱時:

當傳遞的參數不是有效的郵箱時提示參數錯誤:

maillogin.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注冊頁面</title>
<link href="templets/css/common.css" rel="stylesheet" type="text/css">
<style>
#container{
background-color:#fff;
width:990px;
height:547px;
margin-top:50px;
margin-bottom:20px;
overflow:hidden;
}
#mailChk{ width:530px; margin:100px auto auto auto; position:relative;}
.mailfonts{ margin-left:20px;}
.mailpic{ float:left;}
.mailfonts{ float:left;}
.hfonts{ font-size:22px; }
.ftit{
position:relative;
top:-70px;
left:-180px;
border-bottom:1px solid #eee;
width:870px;
padding-bottom:10px;
font-size: 20px;
font-weight: normal;
font-family: "Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53;
color: #323232;
}
.ftit2{
height:1px;
top:50px;
left:-180px;
}
.sfonts{ line-height:48px; color:#666;}
.orange{ color:#ee8c18;}
#maillogin{
display: block;
width: 390px;
height: 50px;
line-height: 50px;
border: 0;
overflow: hidden;
text-align: center;
background: #69b3f2;
font-family: "Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53;
font-size: 26px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin:100px auto 0 85px;
cursor:pointer;
}
#maillogin:hover{ background: #7cbdf5;}
#maillogin,#maillogin:hover{ color:#fff;}
#maillogin a{ color:#fff;}
.notice{
position:relative;
bottom:-70px;
left:-180px;
}
.notit{ font-size:14px; color:#949494; font-weight:bold; font-family:arial;}
.noul{ color:#949494; margin-left:-40px;}
</style>
<script src="templets/js/jquery-1.8.3.min.js"></script>
<script src="templets/js/maillogin.js"></script>
</head>
<body>
<!--頂部長條-->
<div id="header-nav">
<div id="header-nav-fonts">
<span class="top-tie-big"><a href="#">Dee's BLOG</a></span>
<span class="top-tie"> | </span>
<span class="top-tie-big">注冊</span>
<span class="top-tie-small">已有帳號?馬上<a href="#">登錄</a></span>
<div class="cls"></div>
</div>
</div>
<!-- 內容區(qū) -->
<div id="container">
<div id="mailChk">
<?php
if(isset($_GET['m']) && $_GET['m']!=""){
$m = $_GET['m'];
}else{
echo "<div class=\"hfonts ftit\">操作有誤,<a href=\"templets/register.html\">請重新注冊</div>";
exit();
}
?>
<div class="hfonts ftit">郵箱驗證</div>
<img class="mailpic" src="templets/images/mail.jpg">
<div class="mailfonts">
<div class="hfonts">驗證郵件已發(fā)出,請48小時內登陸郵箱驗證</div>
<div class="sfonts">登錄郵箱 <a id="mailaddr" class="orange"><?php echo $m;?></a> ,并按郵件提示操作即可</div>
</div>
<button type="button" id="maillogin"><a href="">立即登錄郵箱驗證</a></button>
<div class="ftit ftit2"></div>
<div class="cls"></div>
<div class="notice">
<h3 class="notit">還沒有收到驗證郵件呢?</h3>
<ul class="noul">
<li>1.嘗試到廣告郵件、垃圾郵件目錄里找找看</li>
<li>2.<a class="blue" href="#">再次發(fā)送驗證郵件</a></li>
<li>3.如果重發(fā)注冊驗證郵件仍然沒有收到,請更換<a class="blue" href="#">另一個郵件地址</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
maillogin.js:

