How to write the front end of SMS verification code

the front page is as follows
clipboard.png

<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="-sharp"></a>
        

</div> </div>

the route corresponding to the method bit sendVerifyMessage, sent in the background is domain/send-verify-message
ask the js code to verify the mobile phone number entered by the user, and pass it to the code in the background.

Mar.09,2021

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="-sharp"></a>
        

</div> </div>

JS:

<script>
    // btn
    var btn = $("-sharpsend-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>

after refresh send CAPTCHA can I click again?
has not found a more elegant code.
countdown to 60s after sending CAPTCHA, and the countdown to refresh continues.


requires jquery and jquery.cookie

var SendCode = (function($, Cookies) {
    return {
        _config : {sendObj:$('-sharpsendCode'), 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();
    $('-sharpsendCode').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('');
        }
        
    });


Don't use jq. Pure es6 is popular now, with vuejs, leverage ~


now the trend of sf is to reach out and ask for the code directly.

not to say that other people's writing is not necessarily suitable for you, just to study, at least think about it for yourself, try it, knock, right? It's not a difficult thing in itself.

if you are really a rookie and don't want to mess with anything, try some integrated account services, such as http://www.onlyid.net. The experience is also much better than the rookie himself!

Menu