js手机短信验证

贴代码之前，我们先讲一下这里我们用到的技术主要有1个。setInterval（），这个方法可以实现倒计时的效果。

css:

.weui_btn_disabled.weui_btn_default {
    color: #C9C9C9;
    border: 1px solid #C9C9C9;
}

.weui_btn_disabled.weui_btn_default {
　　color: #C9C9C9;
}

.weui_btn_plain_primary {
　　color: #04BE02;
　　border: 1px solid #04BE02;
}

.weui_btn_disabled {
color: rgba(255,255,255,.6);
}

 

html:

<div class="weui_cell">
  <div class="weui_cell_hb">
    <label class="weui_label">验证码</label>
  </div>
  <div class="weui_cell_bd weui_cell_primary">
    <input oninput="check_finish()" type="text" placeholder="请输入验证码" class="weui_input <if condition='$vo.is_need eq 1'> is_must</if>" id="code" name="code"/>
  </div>
  <div class="weui_cell_ft register_code">
    <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_plain_primary" id="get_code_btn" style="display: none;" >发送验证码</a>
  </div>
</div>

js:

$('#get_code_btn').click(function(){
            var phone = $('#phone').val();  //获取输入的手机号码
            if(!$('#get_code_btn').hasClass('weui_btn_default')){  //判断是否有这个class名字
                $.Dialog.loading();
                var reg_phone = /1\d{10}/;
                if(!reg_phone.test(phone)){   //验证手机是否符合格式
                    $.Dialog.fail("填写手机号");
                    return false;
                }
                $('#get_code_btn').addClass('weui_btn_disabled weui_btn_default');
                $('#get_code_btn').removeClass('weui_btn_plain_primary');
                $.post(get_code_url,{phone:phone},  //发起请求
                    function(data){
                        if(data.result==1){
                            $.Dialog.success("发送成功");
                            var leftTime = 60;
                            var timer = setInterval(function(){  //倒计时
                                $('#get_code_btn').text(leftTime+'秒');
                                leftTime--;
                                if(leftTime==0){ //重新发送
                                    clearInterval(timer);
                                    $('#get_code_btn').removeClass('weui_btn_disabled weui_btn_default').text('重新获取');
                                    $('#get_code_btn').addClass('weui_btn_plain_primary');
                                }
                            },1000);
                        }else{
                            $('#get_code_btn').removeClass('weui_btn_disabled weui_btn_default').text('重新获取');
                            $('#get_code_btn').addClass('weui_btn_plain_primary');
                            alert(data.msg);
                            $.Dialog.close();
                            //$.Dialog.fail(data.msg);
                        }
                    }
                ).error(
                    function(){ //发送失败
                        $('#get_code_btn').removeClass('weui_btn_disabled weui_btn_default').text('重新获取');
                        $('#get_code_btn').addClass('weui_btn_plain_primary');
                        $.Dialog.fail("系统繁忙");
                    }
                );
            }
        });

如果大家有更好的方法，大家多多讨论