时间:2021-07-01 10:21:17 帮助过:36人阅读
前端页面如下
<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('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('请先输入图形验证码'); } });
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>