前端页面如下
<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('请先输入图形验证码');
}
});
评论支持部分 markdown 语法：**bold** _italic_
[link](http://example.com) > 引用 `code` -
列表。
同时，被你 @ 的用户也会收到通知推荐答案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>