Heim  >  Artikel  >  Backend-Entwicklung  >  求js代码能够将用户输入的手机号,验证,并传入后台的代码

求js代码能够将用户输入的手机号,验证,并传入后台的代码

PHP中文网
PHP中文网Original
2017-05-01 10:15:081922Durchsuche

前端页面如下

求js代码能够将用户输入的手机号,验证,并传入后台的代码

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

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

回答:

需要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(&#39;state&#39;, { path: &#39;&#39; });
                    _this._config.sendObj.removeAttr(&#39;disabled&#39;);
                    _this._config.sendObj.html(&#39;发送验证码&#39;);
                } else {
                    _this._config.sendObj.html(_state.TotalSeconds + &#39;秒后发送&#39;);
                    _state.TotalSeconds -= 1;
                    Cookies.set(&#39;state&#39;, _state, {path:&#39;&#39;})
                }
            }, 1000);
        },
        _initDisable : function() {
            var _state = Cookies.getJSON(&#39;state&#39;);
            if (_state) {
                this._disableButton();
            }
        }
    }
})(jQuery, Cookies);
   var AsynV = {
        &#39;asynValidateCode&#39; : function(data, successCallback, errorCallback) {
            data = data || { code:$(&#39;input[name=captcha]&#39;).val()};
            successCallback = successCallback || function() { return true;};
            errorCallback = errorCallback || function() {return false;};
            $.post(&#39;/simple/_asyn_check_code&#39;, data, function(result) {
                if (200 == result.code) {
                    (successCallback)();
                } else {
                    (errorCallback)();
                }
            }, &#39;json&#39;);
        }
    };
    
    SendCode.init();
    $(&#39;#sendCode&#39;).bind(&#39;click&#39;, function() {
    
        var captcha = $(&#39;input[name=captcha]&#39;).val();
        if (captcha != &#39;&#39;) {
            AsynV.asynValidateCode({ code:captcha}, function() {
                if (SendCode.checkMobile()) {
                    SendCode.sendCode(&#39;/simple/_send_mobile_validate_code&#39;, { mobile:SendCode._config.mobile.val()}, function(result) {
                        alert(result.message);
                        this._disableButton();
                    }, function(result) {
                        alert(result.message);
                    });
                } else {
                    alert(&#39;不正确的手机号&#39;);
                }
            }, function() {
                alert(&#39;图形验证码不正确&#39;);
            });
        } else {
            alert(&#39;请先输入图形验证码&#39;);
        }
        
    });

推荐答案

HTML:

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

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>
                               
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn