PHP+jQuery 注冊(cè)模塊的改進(jìn)（二）：郵箱激活第1/2頁(yè)

更新時(shí)間：2014年10月14日 15:10:33 作者：小dee

本文是PHP+jQuery 注冊(cè)模塊的改價(jià)的第二篇，主要是繼續(xù)完善郵箱激活賬號(hào)方面的功能，非常的詳細(xì)，有需要的朋友可以參考下

接《PHP+jQuery 注冊(cè)模塊的改進(jìn)之一》繼續(xù)修改：

①在注冊(cè)成功后返回登錄郵件頁(yè)面( maillogin.php )，在頁(yè)面中用戶可以點(diǎn)擊鏈接跳轉(zhuǎn)到自己注冊(cè)郵箱的登錄頁(yè)面，可以再次發(fā)送激活鏈接；

②給激活鏈接設(shè)置有效期，過(guò)了有效期點(diǎn)擊激活連接，會(huì)跳轉(zhuǎn)頁(yè)面讓用戶選擇再次發(fā)送郵件或者返回注冊(cè)頁(yè)；再次發(fā)送郵件后，進(jìn)郵箱點(diǎn)擊鏈接激活；

③點(diǎn)擊重新發(fā)送激活連接，不跳轉(zhuǎn)頁(yè)面，在當(dāng)前頁(yè)無(wú)刷新彈出通知：已重新發(fā)送鏈接，幾秒鐘之后通知消失；

④點(diǎn)擊更換收件郵箱，跳轉(zhuǎn)至注冊(cè)頁(yè)

1.點(diǎn)擊郵箱鏈接跳轉(zhuǎn)至相應(yīng)郵箱登陸界面

思路：

在maillogin.js中( 也可在php中設(shè)置 )設(shè)置常用郵件地址列表，當(dāng)用戶的注冊(cè)郵箱和列表中的郵箱匹配時(shí)，則顯示button"立即登錄驗(yàn)證郵箱"，點(diǎn)擊則跳轉(zhuǎn)至郵箱的登陸首頁(yè)；如果用戶注冊(cè)的郵箱在列表中不存在時(shí)，則不顯示登陸button。

如圖，當(dāng)郵箱列表中存在注冊(cè)郵箱時(shí)：

當(dāng)郵箱列表中不存在注冊(cè)郵箱時(shí)：

當(dāng)傳遞的參數(shù)不是有效的郵箱時(shí)提示參數(shù)錯(cuò)誤：

maillogin.php:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注冊(cè)頁(yè)面</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>

<!--頂部長(zhǎng)條-->
<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">注冊(cè)</span>
    <span class="top-tie-small">已有帳號(hào)？馬上<a href="#">登錄</a></span>
    <div class="cls"></div>
  </div>
</div>

<!-- 內(nèi)容區(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\">請(qǐng)重新注冊(cè)</div>";
        exit();
      }
    ?>
    <div class="hfonts ftit">郵箱驗(yàn)證</div>
    <img class="mailpic" src="templets/images/mail.jpg">
    <div class="mailfonts">
      <div class="hfonts">驗(yàn)證郵件已發(fā)出，請(qǐng)48小時(shí)內(nèi)登陸郵箱驗(yàn)證</div>
      <div class="sfonts">登錄郵箱 <a id="mailaddr" class="orange"><?php echo $m;?></a> ,并按郵件提示操作即可</div>
    </div>
    <button type="button" id="maillogin"><a href="">立即登錄郵箱驗(yàn)證</a></button>
    <div class="ftit ftit2"></div>
    <div class="cls"></div>
    <div class="notice">
      <h3 class="notit">還沒(méi)有收到驗(yàn)證郵件呢？</h3>
      <ul class="noul">
        <li>1.嘗試到廣告郵件、垃圾郵件目錄里找找看</li>
        <li>2.<a class="blue" href="#">再次發(fā)送驗(yàn)證郵件</a></li>
        <li>3.如果重發(fā)注冊(cè)驗(yàn)證郵件仍然沒(méi)有收到，請(qǐng)更換<a class="blue" href="#">另一個(gè)郵件地址</a></li>
      </ul>
    </div>
  </div>
  
</div>
</body>
</html>

maillogin.js:

12 下一頁(yè)閱讀全文

您可能感興趣的文章: