PHP+jQuery 注册模块的改进（二）：邮箱激活第1/2页

接《PHP+jQuery 注册模块的改进之一》继续修改：

①在注册成功后返回登录邮件页面( maillogin.php )，在页面中用户可以点击链接跳转到自己注册邮箱的登录页面，可以再次发送激活链接；

②给激活链接设置有效期，过了有效期点击激活连接，会跳转页面让用户选择再次发送邮件或者返回注册页；再次发送邮件后，进邮箱点击链接激活；

③点击重新发送激活连接，不跳转页面，在当前页无刷新弹出通知：已重新发送链接，几秒钟之后通知消失；

④点击更换收件邮箱，跳转至注册页

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>

<!-- 内容区 -->
<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">验证邮件已发出，请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="#">再次发送验证邮件</a></li>
        <li>3.如果重发注册验证邮件仍然没有收到，请更换<a class="blue" href="#">另一个邮件地址</a></li>
      </ul>
    </div>
  </div>

</div>
</body>
</html>

maillogin.js:

当前1/2页 12下一页阅读全文

赞 (0)

相关推荐

  • php发送短信验证码完成注册功能

    php发送短信验证码完成注册功能

    短信验证码注册,很简单,用的是  云通讯的短信系统(收费的,不过有测试的api给我们做测试).好了,不多说,进入正题. 1.收到到云通讯短信系统注册账号,然后下载他们的封装好的短信api接口代码,解压,然后找到CCPRestSDK.php文件和SendTemplateSMS.php文件,将其拉到根目录文件夹里. 2.打开SendTemplateSMS.php文件,首先注意include_once('./CCPRestSDK.php'),千万别包含错路径了,将云通讯给的测试主账号,主账号Token

  • 注册页面之前先验证用户名是否存在的php代码

    reg.php 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

  • php+mysql实现用户注册登陆的方法

    本文实例讲述了php+mysql实现用户注册登陆的方法.分享给大家供大家参考.具体分析如下: 这是一款利用php与mysql数据库实现的用户注册与登录代码,功能也是比较简单实用的用户注册程序,同时也加了用户登录时验证码程序,这样做就安全了很多,代码如下: 复制代码 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xh

  • PHP+jQuery 注册模块开发详解

    PHP+jQuery 注册模块开发详解

    写了一个简单的PHP+jQuery注册模块,需要填写的栏目包括用户名.邮箱.密码.重复密码和验证码,其中每个栏目需要具备的功能和要求如下图: 在做这个模块的时候,很大程度上借鉴了网易注册(http://reg.163.com/reg/reg.jsp?product=urs)的功能和样式.但网易对于每个栏目的判断的做法是:在输入文字时,并不给出任何实时的检测结果,而在这个栏目失去焦点时,才把检测的结果展示出来,这种做法我认为会使用户在输入时视觉上比较统一,看到的是关于该栏目要求的提示,不会出现其他

  • 用Php编写注册后Email激活验证的实例代码

    总共需两个页面,register.php 和 verify.php 1. 用户注册表格 register.php 复制代码 代码如下: <html> <body> <form action="register.php" method="post" name="register"> 用户名:<input type="text" name="username" />

  • ThinkPHP之用户注册登录留言完整实例

    本文以实例形式讲述ThinkPHP实现的包括用户的注册.登录以及留言等功能,这里需要大家注意的是,在存在用户模型的情况下实例化一个用户类的时候使用D方法来实现.   UserActiion.class.php页面: <?php class UserAction extends Action{ public function add(){ $user = D("user"); $user->create(); $result = $user->add(); if($re

  • php用户注册页面利用js进行表单验证具体实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">     <head>         <meta ht

  • PHP连接数据库实现注册页面的增删改查操作

    PHP连接数据库实现注册页面的增删改查操作

    本文实例为大家分享了PHP连接数据库实现注册页面的增删改查操作的方法,供大家参考,具体内容如下 1.连接数据库 <?php //本地测试 $host = '127.0.0.1'; $port = 3306; $user = "root"; $pwd = ""; $link = @mysql_connect("{$host}:{$port}",$user,$pwd,true); if(!$link) { die("Connect S

  • PHP+jQuery 注册模块的改进（一）：验证码存入SESSION

    PHP+jQuery 注册模块的改进（一）：验证码存入SESSION

    需要修改的几个文件: ①register.php 生成随机数和加密值 把register.html改为register.php,并开启session: 把register.js中生成随机数的函数写在register.php中,并改用php方法 <?php session_start();?> .... <?php //生成随机数函数 function showval(){ $num = ""; for($i=0;$i<4;$i++){ $tmp = rand(1

  • PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程

    PHP+Ajax检测用户名或邮件注册时是否已经存在是论坛或会员系统中常见的一个重要功能.本文就以实例形式简单描述这一功能的实现方法.具体步骤如下: 一.PHP检测页面 check.php页面代码如下: <script type="text/javascript" src="jiance.js"></script> <form name="myform" action="" method="

随机推荐