欢迎您光临买源码,本站秉承服务宗旨 履行“站长”责任,销售只是起点,服务永无止境!

JS实现注册登录发送短信验证码动态显示60S倒计时完整案例

通常在web项目中都会遇到账户注册或者忘记密码时需要发送短信验证码的功能,虽然说这种功能很常见,但是实际开发过程中很多人还会遇到不少坑。笔者经过整理把最近项目中的用到的这个发送短信验证码动态显示60S倒计时的完整实现过程分享给广大开发者朋友。

1、页面发送短信验证码的表单

<div class="form-group">
    <div class="col-xs-6 col-sm-7 col-md-7 col-lg-7" >
       <input type="text"  id="userPhone" class="form-control" placeholder="请输入手机号码">
    </div>
    <div class="col-xs-6 col-sm-5 col-md-5 col-lg-5" style="justify-content:flex-end;display: flex;">
       <button type="button" class="btn btn-info"  id="second">点击获取验证码</button>
    </div>
</div>
<div class="form-group">
    <input type="text" name="securityCode" class="form-control"  placeholder="请输入验证码">
</div>

2、发送短信验证码的JS处理逻辑

<script type="text/javascript">
        $("#second").click(function (){
            sendyzm($("#second"));
        });
        //用ajax提交到后台的发送短信接口
        function sendyzm(obj){
            var phone = $("#userPhone").val();
            var result = isPhoneNum();
            if(result) {
                $.ajax({
                    url:"http://localhost:8085/my/sendYzm",
                    data:{phone:phone},
                    dataType:"json",
                    type:"post",
                    async : false,
                    cache : false,
                    success:function(res){
                        debugger;
                        if(res){
                            alert("验证码发送成功");
                        }else{
 
                        }
                    },
                    error:function(){
                        alert("验证码发送失败");
                    }
                })
                setTime(obj);//开始倒计时
            }
        }
 
        //60s倒计时实现逻辑
        var countdown = 60;
        function setTime(obj) {
            if (countdown == 0) {
                obj.prop('disabled', false);
                obj.text("点击获取验证码");
                countdown = 60;//60秒过后button上的文字初始化,计时器初始化;
                return;
            } else {
                obj.prop('disabled', true);
                obj.text("("+countdown+"s)后重新发送") ;
                countdown--;
            }
            setTimeout(function() { setTime(obj) },1000) //每1000毫秒执行一次
        }
 
 
        //校验手机号是否合法
        function isPhoneNum(){
            var phonenum = $("#userPhone").val();
            var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(!reg.test(phonenum)){
                alert('请输入有效的手机号码!');
                return false;
            }else{
                return true;
            }
        }
    </script>

 

免责声明:
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

买源码 » JS实现注册登录发送短信验证码动态显示60S倒计时完整案例

发表评论