时间: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>