摘要：
将destoon系统默认的注册功能升级成快速注册功能，并且注册成功后会实现自动登录。此demo可安装到任意页面中，快来体验下吧......

上次在写《jQuery ajax实现发送手机验证码及注册功能的H5页面》时涉及过此功能，不过当时并没有给出完整的源码及详细的流程步骤。今天，艺灵将分享一套完整的源码，也许看官在以后会用到此功能哦！废话不多说，直接进入主题吧。

由于是完整的实例，html，css，js是必不可少的部分。我们先实现静态效果图，然后再用js来实现其它功能。静态效果图：

一、案例重现

1.html源码

<!--快速注册按钮-->
<a class="c-e70012 register-new" data-type="other" data-class="new-loginw">快速注册</a>
<!--弹出快速注册内容框-->
<div class="new-loginw p20 register1" data-type="other" style="display: none;">
　<form action="" method="post" class="login-form">
　　<p class="nl-tit">快 速 注 册</p>
　　<p class="msg-ts">10秒快速注册，拒绝增项漏项，网购窗帘从此省心省力</p>
　　<p class="du-placeholder p-list"><i class="ico-new_100_100 in-name"></i><input type="text" name="post[mobile]" id="mobile_1" class="du_login_input mobile_1" placeholder="手机/用户名"><i class="ico-new_100_100 in-msg" data-register="register1" ></i></p>
　　<p class="du-placeholder p-list"><i class="ico-new_100_100 in-pw"></i><input type="password" name="post[password]" id="password_1" class="du_login_input password_1" placeholder="密码"><i class="ico-new_100_100 in-msg in-error" data-register="register1" ></i></p>
　　<p class="du-placeholder p-list none"><i class="ico-new_100_100 in-pw"></i><input type="text" name="post[username]" id="username_1" class="du_login_input username_1" placeholder="昵称/会员名"><i class="ico-new_100_100 in-msg in-error" data-register="register1" ></i></p>
　　<p class="nl-list p-list">
　　　<input type="button" class="sjyzm gybtn fr ils-yzm" id="ils-yzm" value="获取短信验证码" data-register="register1" />
　　　<input type="text" name="post[code]" id="code_1" placeholder=" 请输入短信验证码" class="code_1" style="width: 155px; float: left;"  data-register="register1" /></p>
　　<p class="tc p-list">
　　　<input type="button" name="submit" value="立即注册" class="gybtn input-sub" id="input-sub" data-register="register1"  style="width: 100%;" />
　　</p>
　　<p class="tc">拨打热线，快速了解窝窝宝<br /><span class="span-number">0571-81020722</span></p>
　</from>
　<div class="pop-gydel-login gydel" title="关闭" data-way="0" data-bg="1" data-effect="0">×</div>
</div>

1.css源码

<style type="text/css">
*{margin: 0;padding: 0;}
input{outline: none;}
body{background: #fff;font-size: 12px; font-family: "微软雅黑";}
.none{display: none!important;}
.tc{text-align: center;}
/*ico*/
.ico-new_100_100{background:url(http://www.wowobao.com/skin/wowobao_skin/images/ico-new_100_100.png) no-repeat;display:inline-block}
/*快速注册弹出框*/
.new-loginw{width:360px;height:380px;padding:20px;background:#fff;border-radius:10px;position:fixed;left:50%;top:50%;margin:-200px 0 0 -190px;z-index:99999}
.new-loginw .p-list{margin:15px auto;height:40px;display:block}
.nl-tit{font-family:"Microsoft YaHei";font-size:24px;text-align:center;color:#292929;border-bottom:1px solid #939393;padding-bottom:10px;font-weight:bolder}
.msg-ts{padding:20px 0 5px;text-align:center}
.nl-list .ico-new_100_100{float:left}
.nl-list input[type="text"]{width:225px;height:38px;line-height:38px;border:1px solid #e2e2e2}
.in-username{background-position:0 -450px;width:50px;height:40px}
.in-userpw{background-position:0 -500px;width:50px;height:40px}
.span-number{font-size:24px;color:#e60012}
.new-loginw .du-placeholder{position:relative;z-index:1;overflow:hidden;background-color:#eee;border:1px solid #dcdcdc;    width: auto;    padding-left: 45px;}
input.du_login_input{height:40px;line-height:40px;color:#666;width:100%;background-color:#fff;float:right;border:0 !important;text-indent:2px}
.in-name{background-position:-17px -615px}
.in-pw{background-position:-17px -715px}
.new-loginw .in-name,.new-loginw .in-pw{margin-top:-10px;width:16px;height:19px;top:50%;position:absolute;left:14px}
.code_1{float: left;}
.ils-yzm{float: right;}
.gydel{position:absolute;right:0;top:0;font:24px SimSun;color:#333;width:60px;height:60px;line-height:60px;text-align:center;font-weight:bolder;-webkit-transition:.6s;transition:.6s;cursor:pointer}
.gydel:hover{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.gybtn{width:120px;display:inline-block;height:40px;line-height:40px;background:#53A1F3;text-align:center;color:#fff !important;border-radius:3px;cursor: pointer;border: none;}
/*弹出遮罩背景层*/
.pop-gybg{position:fixed;top:0px;left:0px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));width:100%;height:100%;z-index:10000;display:none;background-color:#000;background-color:rgba(0,0,0,.5);}
/*提示信息*/
.m-msg{position:absolute;left: 0;top:20px;color:#fff; width:100%;font-size: 14px; text-align: center;height:0; display: none;z-index: 99999999;}
.msg{background: #000;padding:10px 50px; }
.register-new{display: inline-block;margin: 300px 300px 50px 300px;cursor: pointer;font-size: 20px;}
</style>

此时大致的模型已经有了，我们需要用js来实现一系列的流程。

二、js实现的功能有哪些

js到底需要做哪些工作呢？请看下面的列表。

1.js实现功能列表

点击“快速注册”按钮时弹出注册框；
点击“关闭”按钮(X)时，隐藏注册框；
验证文本框的值，例如：手机号检测、值是否为空；
点击“获取短信验证码”时，通过ajax请求发送短信；
验证码框失去焦点时判断验证码是否正确；
点击“立即注册”按钮时，提示信息状态(错误、成功...)；
为防止多次点击，获取验证码时增加锁定3秒功能，同理，“立即注册”也增加锁定功能；
其它小细节完善

三、新增php文件

由于destoon系统注册页面提交表单时会验证action的值，之前我们一直是写死的，但后来发现这个值是动态的！为了能成功并且动态获取这个值，我们花了几天的时间想了各种方法才搞定！最终我们将此文件命名为：myload_sendcode.php。

除此之处，我们还要创建一个php文件，命名为：myload.php，作用是：注册成功后自动登录且跳转。

四、修改php文件

除了要增加一个动态获取action的文件外，我们还要修改一个系统文件：register.inc.php。
路径：网站根目录/module/member/register.inc.php
修改位置：第157行，
新增代码：exit('ok');。配图：

五、文件存放

在这个demo演示中，我们一共需要创建了2个php文件和1个js文件及一个演示的demo页面。为了方便，此处将4个文件均保存在一个文件夹下，这个文件夹在系统根目录下。演示demo路径如图：

六、在线演示

由于代码比较多，这里便不一一展示出来。不过艺灵会提供一个线上预览的demo地址及完整代码下载包，需要的自行下载。

资源下载

demo演示jquery.ajax实战之弹出层式快速注册特效demo.zip　积分下载，不喜勿下。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2015-12-07/349.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。