首页 > 技术文章 > 微信发送验证码进行验证

youqiancheng 2017-06-28 17:49 原文

1、HTML部分

<div class="page input js_show">

        <div class="page__bd" >

        <h3 class="page__title" style="margin:20px 10px;text-align:center;">绑定邀请</h3>

            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">受邀者手机号:</label>
                </div>
                <div class="weui-cell__bd">
                    {$info.mobile}
                </div>

            </div>
            
             <div class="weui-cell weui-cell_vcode" style="border-bottom: 1px solid #e5e5e5;">
                <div class="weui-cell__bd" >
                     <input class="weui-input" type="tel" name="code" id="code" placeholder="请输入验证码">
                </div>
                <div class="weui-cell__ft">
                     <button class="weui-vcode-btn" id="btnSendCode" onclick="sendMessage()" style="background:#09BB07;color:#fff">点击发送验证码</button>
                </div>
            </div>
            
            <div class="weui-cells__title" >&nbsp;</div>
            <div class="page__bd page__bd_spacing" >
                <a  id="bound" href="javascript:;" class="weui-btn weui-btn_primary" style="background:#09BB07">绑定</a>
            </div>
        </div>
    </div>

2、JS部分

//获取短信验证码
var InterValObj; //timer变量,控制时间
var count = 60; //间隔函数,1秒执行
var curCount;//当前剩余秒数
function sendMessage() {
    var invitation_id = "{$info.id}";
    curCount = count;
    $.post("{:U('Parents/Invitation/sendcode')}",{"invitation_id":invitation_id},function(data){
        if(data.status == 1){
         //设置button效果,开始计时
                $("#btnSendCode").attr("disabled", "true");
                $("#btnSendCode").val( + curCount + "秒再获取");
                InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
         }else{
             alert(data.info);
         }
    });
}
//timer处理函数
function SetRemainTime() {
    if (curCount == 0) {                
        window.clearInterval(InterValObj);//停止计时器
        $("#btnSendCode").removeAttr("disabled");//启用按钮
        $("#btnSendCode").val("重新发送验证码");
        code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效    
    }
    else {
        curCount--;
        $("#btnSendCode").val( + curCount + "秒再获取");
    }
}

$("#bound").on('click',function(e){
    e.preventDefault();
    $code = $("#code").val();
    $openid="{$openid}";
    $invitation_id = "{$info.id}";
    $.post("{:U('Parents/Invitation/bound')}",{"code":$code,"invitation_id":$invitation_id,"openid":$openid},function(data){
        alert(data.info);
    });
});

 

推荐阅读