短信驗(yàn)證碼校驗(yàn)的實(shí)現(xiàn)

[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)證碼失效';
}

demo地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蓉坎,一起剝皮案震驚了整個(gè)濱河市澳眷,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蛉艾,老刑警劉巖钳踊,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異勿侯,居然都是意外死亡拓瞪,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進(jìn)店門助琐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來祭埂,“玉大人,你說我怎么就攤上這事兵钮∏穑” “怎么了?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵掘譬,是天一觀的道長泰演。 經(jīng)常有香客問我,道長葱轩,這世上最難降的妖魔是什么睦焕? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任藐握,我火速辦了婚禮,結(jié)果婚禮上垃喊,老公的妹妹穿的比我還像新娘趾娃。我一直安慰自己,他們只是感情好缔御,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著妇蛀,像睡著了一般耕突。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上评架,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天眷茁,我揣著相機(jī)與錄音,去河邊找鬼纵诞。 笑死上祈,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的浙芙。 我是一名探鬼主播登刺,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼嗡呼!你這毒婦竟也來了纸俭?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤南窗,失蹤者是張志新(化名)和其女友劉穎揍很,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體万伤,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡窒悔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了敌买。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片简珠。...
    茶點(diǎn)故事閱讀 40,040評論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖虹钮,靈堂內(nèi)的尸體忽然破棺而出北救,到底是詐尸還是另有隱情,我是刑警寧澤芜抒,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布珍策,位于F島的核電站,受9級特大地震影響宅倒,放射性物質(zhì)發(fā)生泄漏攘宙。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蹭劈。 院中可真熱鬧疗绣,春花似錦、人聲如沸铺韧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽哈打。三九已至塔逃,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間料仗,已是汗流浹背湾盗。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留立轧,地道東北人格粪。 一個(gè)月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像氛改,于是被迫代替她去往敵國和親帐萎。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容