前端页面如下
{!! Form::label('phone','新手机号',['class' => 'col-md-2 control-label']) !!}
{!! Form::text('phone',null,['class'=>'form-control']) !!}
后台发送方法位sendVerifyMessage,对应的路由为domain/send-verify-message
求js代码能够将用户输入的手机号,验证,并传入后台的代码。
回答:
前端页面如下
{!! Form::label('phone','新手机号',['class' => 'col-md-2 control-label']) !!}
{!! Form::text('phone',null,['class'=>'form-control']) !!}
后台发送方法位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:
{!! Form::label('phone','新手机号',['class' => 'col-md-2 control-label']) !!}
{!! Form::text('phone',null,['class'=>'form-control']) !!}
JS: