【推荐】发邮件验证码Jq+Ajax效果
- WBOYoriginal
- 2016-06-07 11:38:521443parcourir
【推荐】重发邮箱验证码Jq+Ajax效果 //本代码并非完美,也许存在不良之处,高手请多指点,请勿吐槽!<br>
//作者 小曾 Qq839024615 可加我一起交流<br>
<br>
//发邮件验证码自己写好来哈<br>
//控制器是 {:U('Public/email_code')} 发送成功返回1 失败反回0<br>
//1判断是否正确邮箱<br>
//2以ajax提交给控制器<br>
//3发送成功后提示60秒后可重发<br>
//4重发,,,,<br>
<br>
//模板代码<br>
//1须要引入jq ajax<br>
<script></script><br>
<script></script><br>
<br>
//2js代码<br>
<br>
<script><br />
$(document).ready(function(){<br />
$("#email_code").live('click',function() {<br />
var email = $("#email").val();<br />
if(!email.match(/^[a-z0-9]+([._]*[a-z0-9]+)*@[a-z0-9]+([_.][a-z0-9]+)+$/gi)){<br />
alert("格式不正确！请重新输入");<br />
return false;<br />
}<br />
var ajax = new Ajax();<br />
var url ="{:U('Public/email_code')}";<br />
ajax.post(url,{email:email},function(data){<br />
if(data!==false){<br />
alert("发送成功");<br />
$('#cf1').html('等待<s id="cf2">60秒后可重发验证码!');<br />
window.setInterval("run();", 1000);<br />
}else{<br />
alert("发送失败");<br />
}<br />
})<br />
<br />
});<br />
});<br />
<br />
function run(){<br />
var s = document.getElementById("cf2");<br />
if(s.innerHTML == 0){<br />
document.getElementById("cf1").innerHTML = '<a href="javascript:void(0)" style="color:#09F" id="email_code">重发验证码';<br />
return false;<br />
}<br />
s.innerHTML = s.innerHTML * 1 - 1;<br />
}<br />
<br />
</script><br>
<br>
//3html代码<br>
<br>
<form>
<br>
<div>
<br>
<div> 安全邮箱：</div>
<br>
<table>
<br>
<br>
<eq><br>
<tr>
<br>
<td> 输入邮箱: </td>
<br>
<td>
<input><br>
<span><a>发送验证码</a></span>
</td>
<br>
</tr>
<br>
<tr>
<br>
<td> 验证码: </td>
<br>
<td>
<input><br>
<span>输入您邮箱收到的验证码,诺没收到请查看你的拉圾箱或者重发一次,或者更新邮箱!</span>
</td>
<br>
</tr>
<br>
<tr>
<br>
<td> </td>
<br>
<td>
<!--<input name="reset" type="reset" class="btn_01 btn_pd" value="重置" />--><br>
<input>
</td>
<br>
</tr>
<br>
<else></else><br>
<tr>
<br>
<td>已绑定: </td>
<br>
<td> {$User.email}</td>
<br>
</tr>
<br>
</eq><br>
</table>
<br>
<br>
<br>
//4效图如图<img src="/Uploads/editor/2015-05-04/55478296553c0.png" alt="【推荐】发邮件验证码Jq+Ajax效果" ><br>
<br>
诺代码格式太乱无法看懂,请看以下图片<br>
<br>
<img src="/Uploads/editor/2015-05-04/554782fb05a9d.png" alt="【推荐】发邮件验证码Jq+Ajax效果" ><code class="prettyprint linenums lang-php"> //本代码并非完美,也许存在不良之处,高手请多指点,请勿吐槽!<br>
//作者 小曾 Qq839024615 可加我一起交流
AD：真正免费，域名+虚机+企业邮箱=0元