js手机短信验证

时间：2022-12-23 05:52:14

贴代码之前，我们先讲一下这里我们用到的技术主要有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 = /\d{}/;

                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==){

                            $.Dialog.success("发送成功");

                            var leftTime = ;

                            var timer = setInterval(function(){  //倒计时

                                $('#get_code_btn').text(leftTime+'秒');

                                leftTime--;

                                if(leftTime==){ //重新发送

                                    clearInterval(timer);

                                    $('#get_code_btn').removeClass('weui_btn_disabled weui_btn_default').text('重新获取');

                                    $('#get_code_btn').addClass('weui_btn_plain_primary');

                                }

                            },);

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

                    }

                );

            }

        });

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

相关文章