关于表单中验证码获取功能的前台注意事项

一,业务需求:

1.1,验证码有效期5分钟;
1.2,页面倒计时;
1.3,验证码只能使用一次;

验证码有效时间倒计时HTML效果

验证码有效时间倒计时HTML效果


二,前台框架

layer跟jquery共用时,最好不让layer承载全部业务逻辑。

var timer=null;
//当前时间与验证码发送时间差
var timelocal = Math.round(new Date().getTime()/1000).toString() - "<{$Think.session.auth_code_withdraw_time}>";
//时间差小于5分钟则禁止发送获取请求
if( timelocal < 500 ){
    varificationset(500 - timelocal);
    $('#phone').attr('disabled', 'disabled');
    $('#phone').addClass('layui-btn-primary');
}

//发送验证码发送请求
$("#phone").on('click',function(){
    //禁止再次发送请求
    $('#phone').attr('disabled', 'disabled');
        var phone = $(this).data('phone');
        $.post("__MODULE__/ajax/setVarifacationCode",{phone:$(this).data('phone')},function(res){
            var res = $.parseJSON( res );
            layer.msg(res.info,{icon:res.icon});
            //验证码是否发送成功
            if(res.icon != 1){
                //不成功再发
                $("#phone").removeAttr('disabled');
            }else{
                varificationset(500);
                $('#phone').attr('disabled', 'disabled');
                $('#phone').addClass('layui-btn-primary');
            }
        });
});

function varificationset(times){
    timer=setInterval(function(){
        $('#phone').val('-' + times + 's').addClass('layui-btn-primary');
        times--;
        if(times <= 0){
            clearInterval(timer);
            $("#phone").removeClass('layui-btn-primary');
            $("#phone").removeAttr('disabled');
            $("#phone").val("获取验证码");
        }
    },1000);
} 


三,页面渲染

明确页面重置范围,如果是表单重置就不用页面强制清除缓存的刷新方式来实现,死循环。

//页面刷新重置表单元素
window.onload = function(){
    $('.layui-form')[0].reset();
}




参考资料:

//商家佣金提现操作
public function bp_business01_withdraw(){
    $mysql                         = M();
    $tool                          = D('Tool');
    try{
        $mysql->startTrans();
        $rules                     = [
            ['dfCode','/^\d+$/','代付商户号不能为空或为数字之外字符!',1],
            ['amount',array("5","50000"),'提现金额必须在5到50000元之间!',1,'between'],
            ['bankCode','/^\d+$/','银行卡所在省代码必须为数字!',1],
            ['bankAddress','/^\d+$/','支行编号为空!',1],
            ['qybm','/^\d+$/','省区域编码必须为数字!',1],
            ['city','/^\d+$/','市区域编码必须为数字!',1],
            ['type','array("1001","1002")','账户类型只有对公对私两种!',1,'notin'],
            ['name','/^[a-zA-Z\x{4e00}-\x{9fa5}]+$/u','持卡人姓名只能为汉字和字母!',1],
            ['cardNo','/^\d+$/','卡号必须为无空格数字!',1],
            ['walletId','require','钱包不能为空!',1],
            ['code','/^\d{6}$/','验证码不能为空且必须为6位数字!',1],
        ];
        $reqdata                   = json_decode($_POST['data'],1);
        $validate = $mysql->validate($rules)->create($reqdata);
        if (!$validate&&!is_array($validate)){
            E($mysql->getError());
        }
        //验证码是否有效
        if (time() - session('auth_code_withdraw_time') > session('auth_code_withdraw_expire')) {
            session('auth_code_withdraw',null);
        }
        if(empty(session('auth_code_withdraw'))){
            E('提现验证码不存在!');
        }
        if(session('auth_code_withdraw')!= $reqdata['code']){
            E('验证码无效!');
        }
        //佣金提现
        $data                      = array();
        $b01id                     = $mysql->table('bp_business01')->where(['dfCode'=>$reqdata['dfCode']])->field('b01id,dfPrivKey')->find();
        if(empty($b01id)){
            E('根据代付编号查询商户编号失败');
        }
        //验证提现金额
        $body['bCode']             = $reqdata['dfCode'];
        $body['walletId']          = $reqdata['walletId'];
        $mchid                     = $reqdata['dfCode'];
        $privateKey                = $b01id['dfPrivKey'];
        $allAmt                    = 0;
        $res                       = D('Payment')->opApi('transfer_query_wallet_request',$body,$reqNo=null,$mchid,$appId='1001',$privateKey);
        if($res['head']['respCd']!= '0000'){
            E($res['head']['respMsg']);
        }else{
            $allAmt                = $res['data']['allAmt'];
        }
        if($allAmt < $reqdata['amount']*100){
            E('余额不足');
        }
        $cardNo                    = $tool->encryptToken($reqdata['cardNo']);
        $time                      = explode(' ', microtime());
        $data['b01id']             = $b01id['b01id'];
        $data['amount']            = $reqdata['amount']*100;
        $data['bankCode']          = $reqdata['bankCode'];
        $data['subBankCode']       = $reqdata['bankAddress'];
        $data['qybm']              = $reqdata['qybm'];
        $data['subqybm']           = $reqdata['city'];
        $data['type']              = $reqdata['type'];
        $data['name']              = $reqdata['name'];
        $data['cardNo']            = $cardNo;
        $data['walletId']          = $reqdata['walletId'];
        $data['orderId']           = date('YmdHis', $time[1]) . intval($time[0] * 100000);
        $data['opAdminId']         = $_SESSION['admin']['op_id'];
        $data['insertTime']        = date('Y-m-d H:i:s');
        $res                       = $mysql->table('bp_business01_withdraw_lists')->add($data);
        if(!$res){
            E('商户提现表维护失败,sql: '.$mysql->getlastsql());
        }
        $bodydata = $this->get_business01_df_data($res,$mysql);
        $body                      = $bodydata;
        foreach($body as $key => &$value){
            if($key == 'bankAccount'){
                $value             = $tool->decryptToken($value);
            }
        }
        $privateKey                = $body['dfPrivKey'];
        $mchid                     = $body['mchid'];
        unset($body['dfPrivKey']);
        unset($body['mchid']);
        $res                       = D('Payment')->opApi('transfer_record_request',$body,$reqNo=null,$mchid,$appId='1001',$privateKey);
        if($res['head']['respCd']!= '0000'){
            E($res['head']['respMsg']);
        }
        //发送成功验证码失效
        session('auth_code_withdraw',null);
        $mysql->commit();
        $result['success']         =    'true';
        $result['info']            =    $res['head']['respMsg'];
        $result['icon']            =    1;
        $result['dfCode']          =   $reqdata['dfCode'];
        exit(json_encode($result));
    }catch (Exception $e){
        $mysql->rollback();
        $result['success']         =    'false';
        $result['info']            =    $e->getMessage();
        $result['icon']            =    2;
        $result['dfCode']          =   $reqdata['dfCode'];
        exit(json_encode($result));
    }
}


/**
 * 短信服务接口——验证码
 * @param $tel
 * @param $code
 * @param $paramin
 * @return string
 */
function setVarifacationCode($tel,$code,$paramin){
    //判断五分钟内是否发过验证码
    if (time() - session('auth_code_withdraw_time') < session('auth_code_withdraw_expire')) {
        $result['success']     = 'false';
        $result['icon']        = 2;
        $result['info']        = '验证码请求发送之后,五分钟内不再发送';
        return json_encode($result);
    }
    //记录请求时间
    session('auth_code_withdraw_time',time());
    $result['success']         = 'success';
    $result['icon']            = 1;
    $result['info']            = '发送成功';
    //设置验证码有效期
    session('auth_code_withdraw_expire',300);
    session('auth_code_withdraw',$paramin);
    $param                     = ["code"=>session('auth_code_withdraw')];
    trace($param,'cans');
    $res                       = sendMsg($tel,$code,$param);
    if($res['Message']!='OK'){
        $result['success']     = 'false';
        $result['icon']        = 2;
        $result['info']        = $res['Message'];
    }
    trace($res,'验证码日志');
    return json_encode($result);
} 



ps:使用TinkPHP3.2.1

相关文档

没有数据

评论0条