[TOC]
1. 根據(jù)手機(jī)號碼發(fā)送驗(yàn)證碼
關(guān)于haoservice
公司這邊外包項(xiàng)目為了實(shí)現(xiàn)短信驗(yàn)證功能而向haoservice買的功能里逆,其實(shí)就是一串url茧跋,在里面有幾個(gè)參數(shù)娩鹉。
http://apis.haoservice.com/sms/send?mobile={$phone}&tpl_id=2&tpl_value=%23code%23%3d{$code}%26%23company%23%3d{$company}&key={$key}
比較重要的是以下幾個(gè):
mobile 你所要發(fā)送驗(yàn)證碼的號碼
tpl_value 為你要發(fā)送的信息氓仲,注意颜凯,必須以
#code#={$code}&#company#={$company}
形式去urlEncode,其中的{$code}是你要發(fā)送的驗(yàn)證碼罢防,{$company}為你的公司名
直接訪問即可發(fā)送驗(yàn)證碼
驗(yàn)證碼可以根據(jù)自己需要隨意生成蹲缠,電話號碼就得通過用戶輸入棺克,再通過表單提交或者ajax來實(shí)現(xiàn)
這里我用的是ajax來實(shí)現(xiàn)
$.ajax({url: "./send_code.php", data: {phone: $("#phone").val()}});
在session保存驗(yàn)證碼
由于需要比對,所以肯定是需要有一個(gè)校驗(yàn)本的线定,至于是放在哪里娜谊,就是得根據(jù)實(shí)際情況來決定,由于現(xiàn)在情況是斤讥,驗(yàn)證碼只能存活一段時(shí)間而已因俐,且是用完即棄的玩意,最好還是用session來保存驗(yàn)證碼
$lifetime=60;//保存1分鐘
session_start();
setcookie(session_name(),session_id(),time()+$lifetime,"/");
$_SESSION["code"] = $time; //保存驗(yàn)證碼
而在驗(yàn)證完畢后也是得盡快銷毀
if ($code == $_GET["code"]) {
unset($_SESSION['code']);
echo 'successful';
}
2. 倒計(jì)時(shí)再發(fā)送的按鈕
不廢話直接上代碼
$(".msgs").click(function (event) {
var time = 30;
var code = $(this);
if (validCode) {
validCode = false;
code.addClass("msgs1");
var t = setInterval(function () {
time--;
code.html(time + "秒");
if (time == 0) {
clearInterval(t);
code.html("重新獲取");
validCode = true;
code.removeClass("msgs1");
}
}, 1000);
}
});
msgs元素是獲取驗(yàn)證碼的按鈕周偎,利用setInterval來實(shí)現(xiàn)倒計(jì)時(shí)的功能抹剩,并利用css來改變它的可按與不可按
css如下
.msgs {
display: inline-block;
width: 104px;
color: #fff;
font-size: 12px;
border: 1px solid #0697DA;
text-align: center;
height: 30px;
line-height: 30px;
background: #0697DA;
cursor: pointer;
}
.msgs1 {
background: #E6E6E6;
color: #818080;
border: 1px solid #CCCCCC;
}
3. 校對驗(yàn)證碼
這邊依舊是使用ajax來實(shí)現(xiàn)驗(yàn)證碼的校對,因?yàn)椴幌M脩糨斿e驗(yàn)證碼后界面被完全刷新而得重新輸入
$("#check").click(function () {
var code = $("#code").val();
if (code == '') {
alert("驗(yàn)證碼不為空");
return false;
}
else {
$.ajax({
url: "./check_code.php",
data: {code: $("#code").val()},
success: function (data) {
alert(data);
if (data == "successful") {
location.href = "./index.php";
}
else if(data == "fail"){
alert("驗(yàn)證碼錯誤");
}
}
});
}
});
})
check_code.php的代碼如下
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2015/11/17
* Time: 10:06
*/
session_start();
if (isset($_SESSION['code'])) {
$code = $_SESSION['code'];
if (isset($_GET["code"])) {
if ($code == $_GET["code"]) {
unset($_SESSION['code']);
// Header("Location: ./index.php");
echo 'successful';
} else {
echo"fails";
}
}
}else{
echo '驗(yàn)證碼失效';
}