【JS】短信验证码前端如何写

Z时代
2024-01-10
分类：技术分享

前端页面如下
【JS】短信验证码前端如何写

<div class="form-group">
{!! Form::label('phone','新手机号',['class' => 'col-md-2 control-label']) !!}
<div class="col-md-5">
{!! Form::text('phone',null,['class'=>'form-control']) !!}
</div>
<div class="col-md-4">
<p class="form-control-static">
<a href="#">发送验证码</a>
</p>
</div></div>

后台发送方法位sendVerifyMessage,对应的路由为domain/send-verify-message
求js代码能够将用户输入的手机号，验证，并传入后台的代码。

回答

HTML:

<div class="form-group">
    {!! Form::label('phone','新手机号',['class' => 'col-md-2 control-label']) !!}
    <div class="col-md-5">
        {!! Form::text('phone',null,['class'=>'form-control']) !!}
    </div>
    <div class="col-md-4">
        <p class="form-control-static">
        <a id="send-captcha" href="#">发送验证码</a>
        </p>
    </div></div>

JS:

<script>
    // 定义按钮btn
    var btn = $("#send-captcha");
    // 定义发送时间间隔(s)
    var SEND_INTERVAL = 60;
    var timeLeft = SEND_INTERVAL;
    /**
    * 绑定btn按钮的监听事件
    */
    var bindBtn = function(){
        btn.click(function(){
            // 需要先禁用按钮（为防止用户重复点击）
            btn.unbind('click');
            btn.attr('disabled', 'disabled');
            $.ajax({
                // ajax接口调用...
            })
            .done(function () {
                alert('发送成功');
                //成功
                timeLeft = SEND_INTERVAL;
                timeCount();                
            })
            .fail(function () {
                //失败，弹窗
                alert('发送失败');
                // ** 重要：因为发送失败，所以要恢复发送按钮的监听 **
                bindBtn();
                btn.remove('disabled');
            });
        })
    }           
    /**
    * 重新发送计时
    **/ 
    var timeCount = function() {
        window.setTimeout(function() {
            if(timeLeft > 0) {
                timeLeft -= 1;
                btn.html(timeLeft + "后重新发送");
                timeCount();
            } else {
                btn.html("重新发送");
                bindBtn();
            }
        }, 1000);
    }</script>

刷新以后发送验证码是不是又可以点击了？
一直没找到比较优雅写法的代码，
发送验证码后倒计时60s，刷新也继续倒计时。

需要jquery 和 jquery.cookie

var SendCode = (function($, Cookies) {
    return {
        _config : {sendObj:$('#sendCode'), mobile:$('input[name=mobile]')},
        _timer : null,
        /**
         * 初始化发化验证码类
         *
         */
        init : function(config) {
            this._initDisable();
            $.extend(this._config, config);
            return this;
        },
        /**
         * 异步检查手机号是否合法
         */
        AsynCheckMobile : function(url, data, successCallback, errorCallback) {
            this.doPost({ url: url, data:data, successCallback:successCallback, errorCallback:errorCallback});
        },
        /**
         *    发送验证码
         */         
        sendCode : function(url, data, successCallback, errorCallback) {
            this.doPost({ url: url, data:data, successCallback:successCallback, errorCallback:errorCallback});
        },
        /**
         * 异步交互动作
         */
        doPost : function(params) {
            if (toString.call(params.successCallback) !== "[object Function]") {
                params.successCallback = function() {};
            }
            if (toString.call(params.errorCallback) !== "[object Function]") {
                params.errorCallback = function() {};
            }
            var _this = this;
            $.ajax({
                url : params.url,
                data : params.data,
                type : 'post',
                dataType : 'json',
                success : function(result) {
                    if (result.code == 200) {
                        params.successCallback.call(_this, result);
                    } else {
                        params.errorCallback.call(_this, result);
                    }
                }
            })
        },
        checkMobile: function() {
            return /\d{11}/.test(this._config.mobile.val());
        },
        /**
         *    禁用按钮
         */
        _disableButton : function() {
            var TotalSeconds = 60;
            var storeState = Cookies.getJSON('state');
            storeState = storeState || {TotalSeconds:TotalSeconds, enable:false};
            Cookies.set('state', JSON.stringify(storeState), {path:''});
            this._config.sendObj.prop('disabled', true);
            var _this = this;
            this._timer = setInterval(function() {
                var _state = Cookies.getJSON('state');
                if (_state.TotalSeconds <= 0) {
                    clearInterval(_this._timer);
                    Cookies.remove('state', { path: '' });
                    _this._config.sendObj.removeAttr('disabled');
                    _this._config.sendObj.html('发送验证码');
                } else {
                    _this._config.sendObj.html(_state.TotalSeconds + '秒后发送');
                    _state.TotalSeconds -= 1;
                    Cookies.set('state', _state, {path:''})
                }
            }, 1000);
        },
        _initDisable : function() {
            var _state = Cookies.getJSON('state');
            if (_state) {
                this._disableButton();
            }
        }
    }})(jQuery, Cookies);


   var AsynV = {
        'asynValidateCode' : function(data, successCallback, errorCallback) {
            data = data || { code:$('input[name=captcha]').val()};
            successCallback = successCallback || function() { return true;};
            errorCallback = errorCallback || function() {return false;};
            $.post('/simple/_asyn_check_code', data, function(result) {
                if (200 == result.code) {
                    (successCallback)();
                } else {
                    (errorCallback)();
                }
            }, 'json');
        }
    };
    SendCode.init();
    $('#sendCode').bind('click', function() {
        var captcha = $('input[name=captcha]').val();
        if (captcha != '') {
            AsynV.asynValidateCode({ code:captcha}, function() {
                if (SendCode.checkMobile()) {
                    SendCode.sendCode('/simple/_send_mobile_validate_code', { mobile:SendCode._config.mobile.val()}, function(result) {
                        alert(result.message);
                        this._disableButton();
                    }, function(result) {
                        alert(result.message);
                    });
                } else {
                    alert('不正确的手机号');
                }
            }, function() {
                alert('图形验证码不正确');
            });
        } else {
            alert('请先输入图形验证码');
        }
    });