發(fā)送驗(yàn)證碼找回密碼功能

1、定義前臺(tái)獲取驗(yàn)證碼的html模板

<div class="form-group">
    <input type="text" class="form-control"  name="phone" id="phone" placeholder="手機(jī)號(hào)碼" onfocus="this.placeholder=''" onblur="this.placeholder='手機(jī)號(hào)碼'">
    <p class="col-lg-12 col-md-12 col-sm-12 find">
        <input type="text" class="form-control pull-left" id="code" name="code" placeholder="驗(yàn)證碼" onfocus="this.placeholder=''" onblur="this.placeholder='驗(yàn)證碼'">
        <button type="button" id="send" class="btn btn-block btn-outline btn-default pull-right acquire">點(diǎn)擊獲取</button>
    </p>
    <button type="button" id="submit" class="btn btn-block btn-outline btn-primary">找回密碼</button>
    <p>
        <span class="fgt">還沒有賬號(hào)?<a href="{:url('/web/Index/register')}">免費(fèi)注冊(cè)</a></span>
    </p>
</div>

2、當(dāng)點(diǎn)擊獲取驗(yàn)證碼的按鈕,則發(fā)送手機(jī)號(hào)到后臺(tái)

var countdown = 60;
var tt;
$("#send").click(function(){
    //驗(yàn)證座機(jī)號(hào)碼的正則
    var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
    //驗(yàn)證手機(jī)號(hào)碼的正則
    var isMob=/^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[012356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
    var phone_str=$("#phone").val();
    phone_str = $.trim(phone_str);
    if(phone_str==""){
        toastr.error('手機(jī)號(hào)碼必填');
        return;
        //如果當(dāng)不是手機(jī)號(hào)碼或者座機(jī)號(hào)碼時(shí),則返回錯(cuò)誤
    }else if(!(isPhone.test(phone_str)||isMob.test(phone_str))){
        toastrr.error('手機(jī)號(hào)碼格式錯(cuò)誤');
        return;
    }
    //向驗(yàn)證碼函數(shù)發(fā)送手機(jī)號(hào)
    var url = "{:url('/user/Login/sendPwdCode')}";
    $.post(url,{mobile:phone_str},function(data){
        if(data.code ==1){
            toastr.success('發(fā)送成功,請(qǐng)注意查收');
            $("#send").attr("disabled","true");
            tt = setInterval(function() {
                //10分鐘修改一次按鈕狀態(tài),并調(diào)用從新獲取驗(yàn)證碼的函數(shù)
                settime();
            },1000)
        }else {
            toastr.error(data.msg);
        }
    })
});
//修改按鈕狀態(tài)的函數(shù)
function settime() {
    if (countdown == 0) {
        $("#send").val("沒收到?重新獲取");
        $("#send").removeAttr("disabled");
        countdown = 60;
        clearInterval(tt);
    } else {
        $("#send").val(countdown);
        countdown--;
    }
}

3、前臺(tái)發(fā)送請(qǐng)求到后臺(tái)獲取驗(yàn)證碼的函數(shù)

//發(fā)送驗(yàn)證碼 ,找回密碼
function sendPwdCode($mobile, $app = false)
{
    $umsg = findById("user", array("name" => $mobile), "id");
    if (empty($umsg["data"])) {
        if ($app) {
            return json(array('code' => '0', 'msg' => '沒有找到該賬號(hào),請(qǐng)重新輸入', 'data' => ''));
        } else {
            return array('code' => '0', 'msg' => '沒有找到該賬號(hào),請(qǐng)重新輸入', 'data' => '');
        }
    }
    //判斷當(dāng)前手機(jī)號(hào)一個(gè)小時(shí)內(nèi)已經(jīng)發(fā)送了多少
    $start_time = time() - 3600;
    $map = array(
        'addtime' => array('gt', $start_time),
        'mobile' => $mobile,
        'type' => 0
    );
    $msg = getDataList('SmsLog', $map, 'id');
    if ($msg['code'] == '1') {
        $count = count($msg['data']);
    }
    //一個(gè)小時(shí)內(nèi)不能超過三次
    if ($count >= 3) {
        if ($app) {
            return json(array('code' => '0', 'msg' => '發(fā)送次數(shù)過于頻繁,請(qǐng)一個(gè)小時(shí)后再試', 'data' => ''));
        } else {
            return array('code' => '0', 'msg' => '發(fā)送次數(shù)過于頻繁,請(qǐng)一個(gè)小時(shí)后再試', 'data' => '');
        }
    }
    //四位隨機(jī)數(shù)字驗(yàn)證碼
    $code = get_random(4);
    $tplId = config('sms_tpl_id.findcode');
    $smsdata = array('code'=>$code);
    // $value = "#code#=" . $code;
    //  $result = sendSms($mobile, $value, '49047');
    $result = alsms($tplId,$mobile,$smsdata);
    if ($result['code'] == "1") {
        //把該條數(shù)據(jù)保存到數(shù)據(jù)庫(kù)
        //發(fā)送成功,做記錄
        $data = array(
            'mobile' => $mobile,
            'msg' => $code,
            'type' => '0',
            'addtime' => time()
        );
        saveData('SmsLog', $data);
        if ($app) {
            return json(array('code' => '1', 'msg' => '發(fā)送成功,十分鐘內(nèi)有效', 'data' => '發(fā)送成功,十分鐘內(nèi)有效'));
        } else {
            return array('code' => '1', 'msg' => '發(fā)送成功,十分鐘內(nèi)有效', 'data' => '發(fā)送成功,十分鐘內(nèi)有效');
        }
    } else {
        if ($app) {
            return json(array('code' => '0', 'msg' => "發(fā)送失敗", 'data' => '發(fā)送失敗'));
        } else {
            return array('code' => '0', 'msg' => $result['msg'], 'data' => $result['msg']);
        }
    }
}   

4、當(dāng)前臺(tái)點(diǎn)擊找回密碼按鈕,則發(fā)送手機(jī)號(hào)和驗(yàn)證碼到后臺(tái)判斷是否符合,如果前臺(tái)收到后臺(tái)驗(yàn)證成功的參數(shù),則跳轉(zhuǎn)到新的密碼設(shè)置頁(yè)面

$("#submit").click(function () {
        var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
        var isMob=/^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[012356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
        var phone_str=$("#phone").val();
        phone_str = $.trim(phone_str);
        if(phone_str==""){
            toastr.error('手機(jī)號(hào)碼必填');
            return;
        }else if(!(isPhone.test(phone_str)||isMob.test(phone_str))){
            toastr.error('電話號(hào)碼格式錯(cuò)誤');
            return;
        }
        var code = $('#code').val();
        code = $.trim(code);
        if(code ==''){
            toastr.error('驗(yàn)證碼必填');
            return ;
        }
        var url = "{:url('/user/Login/checkCode')}";
        $.post(url, {'phone':phone_str,'code':code}, function (data) {
            if(data.code ==1){
                toastr.success('驗(yàn)證成功,請(qǐng)輸入新密碼');
                var phone = data.phone;
                setTimeout("go("+phone+")",1000);
              //  location.href="{:url('/web/Index/newPwd')}?phone="+phone;
            }else {
                toastr.error(data.msg);
            }
        });

    });

});
//跳轉(zhuǎn)到新的密碼設(shè)置頁(yè)面,并將手機(jī)號(hào)攜帶過去以便獲取手機(jī)號(hào)進(jìn)行設(shè)置
function go(phone){
    location.href="{:url('/web/Index/newPwd')}?phone="+phone;
}

5、后臺(tái)驗(yàn)證驗(yàn)證碼是否正確的函數(shù)

//找回密碼功能,驗(yàn)證驗(yàn)證碼
function checkCode($app = false)
{
    $phone = input('phone', '');
    $code = input('code', '');
    //
    $res = verifySmsCode($phone, $code, 600);
    if ($res['code'] == '0') {
        if (empty($umsg["data"])) {
            if ($app) {
                return json(array('code' => '0', 'msg' => $res['msg'], 'data' => ''));
            } else {
                return array('code' => '0', 'msg' => $res['msg'], 'data' => '');
            }
        }
    } else {
        if ($app) {
            return json(array('code' => 1, 'phone' => $phone));
        } else {
            return array('code' => 1, 'phone' => $phone);
        }
    }
}

6、定義新的密碼設(shè)置頁(yè)面的表單

<form action="{:url('/user/User/findPassword')}" method="post" id="reset">
    <input type="password" style="margin-bottom:14px;" class="form-control"  name="password" id="password" placeholder="新密碼(6-20位字母、數(shù)字、符號(hào)組合)" onfocus="this.placeholder=''" onblur="this.placeholder='新密碼(6-20位字母、數(shù)字、符號(hào)組合)'">
    < input type="password" style="margin-bottom:14px;" class="form-control"  name="cfmpassword" id="cfmpassword" placeholder="確認(rèn)密碼" onfocus="this.placeholder=''" onblur="this.placeholder='確認(rèn)密碼'">
    <input type="hidden" id="phone" name="phone" value="{$phone|default=''}">
</form>

7、設(shè)置新密碼的js提交函數(shù)


$("#btnreset").click(function () {
    var password = $("#password").val();
    var cfmpassword = $.trim($("#cfmpassword").val());
    password = $.trim(password);
    if(password==""){
        toastr.error('新密碼必填');
        return;
    }
    if(password !==cfmpassword){
        toastr.error('兩次密碼不一致');
        return;
    }
    var regExp=/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
    if(!regExp.test(password)){
        toastr.error('密碼必須為6-20位字母、數(shù)字或符號(hào)組合');
        return;
    }
    var pwd = $("#password").val();
    var cfmpwd = $("#cfmpassword").val();
    var phone = $("#phone").val();
    var url = "{:url('/web/Index/findPassword')}" ;
    $.post(url, {'phone':phone,'password':pwd,'cfmpassword':cfmpwd}, function(data){
        if (data.code == 1) {
            toastr.success('重置密碼成功,請(qǐng)用新密碼登錄');
            setTimeout('go()',1000);

        } else {
           toastr.error(data.msg);
        }
    });
});
//當(dāng)返回新密碼設(shè)置成功后,則跳轉(zhuǎn)到登陸賬號(hào)頁(yè)面
function go(){
    location.href="{:url('/web/Index/login')}";
}

8、當(dāng)點(diǎn)擊保存新密碼后,進(jìn)入新密碼保存函數(shù)

//保存新密碼
function findPassword($app = false)
{
    try{
        $phone = input('phone', '');
        $pwd = input('password');
        $pwd = trim($pwd);
        $repwd = input('cfmpassword');
        $repwd = trim($repwd);
        if (empty($phone)) {
            if ($app) {
                return json(array('code' => 0, 'msg' => '電話號(hào)碼不能為空'));
            } else {
                return array('code' => 0, 'msg' => '電話號(hào)碼不能為空');
            }
        }
        if ($pwd != $repwd) {
            if ($app) {
                return json(array('code' => 0, 'msg' => '新密碼和確認(rèn)密碼不一致'));
            } else {
                return array('code' => 0, 'msg' => '新密碼和確認(rèn)密碼不一致');
            }
        }
        $phone =think_decrypt($phone); //解密一下
        $rlt = saveDataByCon("user", array("password" => md5($pwd)), array("name" => $phone));
        if ($app) {
            return json($rlt);
        } else {
            return $rlt;
        }
    }catch (\Exception $e) {
        //記錄事務(wù)
        c_Log($e);
        return array("code" => 0, "msg" =>'找回密碼失敗','data'=>'');
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,677評(píng)論 19 139
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,267評(píng)論 25 708
  • 22年12月更新:個(gè)人網(wǎng)站關(guān)停,如果仍舊對(duì)舊教程有興趣參考 Github 的markdown內(nèi)容[https://...
    tangyefei閱讀 35,432評(píng)論 22 257
  • 今天是9月16日,距離我進(jìn)入大學(xué)已經(jīng)有一年的時(shí)間了,大一不知不覺就過去了?;仡^想想我的大一收獲了什么,收獲了...
    鳳懶懶閱讀 301評(píng)論 0 0
  • 關(guān)于獻(xiàn)血漿的認(rèn)識(shí)誤區(qū) 1、獻(xiàn)血漿會(huì)發(fā)胖嗎? 獻(xiàn)血漿后,如果過分注意休息和營(yíng)養(yǎng),進(jìn)食的能量大大超過了消耗的能量,身體...
    高家領(lǐng)申通快遞閱讀 497評(píng)論 0 0

友情鏈接更多精彩內(nèi)容