微信发送验证码进行验证
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" > </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); }); });
信息创造价值, 知识就是力量。