[TOC]

1. 根據(jù)手機(jī)號碼發(fā)送驗(yàn)證碼

關(guān)于haoservice

公司這邊外包項(xiàng)目為了實(shí)現(xiàn)短信驗(yàn)證功能而向haoservice買的功能，其實(shí)就是一串url，在里面有幾個參數(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}

比較重要的是以下幾個：
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)證碼

由于需要比對，所以肯定是需要有一個校驗(yàn)本的，至于是放在哪里，就是得根據(jù)實(shí)際情況來決定，由于現(xiàn)在情況是，驗(yàn)證碼只能存活一段時間而已，且是用完即棄的玩意，最好還是用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ì)時再發(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ì)時的功能，并利用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)椴幌Ｍ脩糨斿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)證碼失效';
}

demo地址