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("系統繁忙");
                    }
                );
            }
        });

如果大家有更好的方法，大家多多討論