原型图::
发送短信验证码 layuiAdmin有封装好的js
在admin.js中
//发送验证码
,sendAuthCode: function(options){
options = $.extend({
seconds: 60
,elemPhone: '#LAY_phone'
,elemVercode: '#LAY_vercode'
}, options);
var seconds = options.seconds
,token = null
,timer, countDown = function(loop){
var btn = $(options.elem)
seconds--;
if(seconds < 0){
btn.removeClass(DISABLED).html('获取验证码');
seconds = options.seconds;
clearInterval(timer);
} else {
btn.addClass(DISABLED).html(seconds + '秒后重获');
}
if(!loop){
timer = setInterval(function(){
countDown(true);
}, 1000);
}
};
$body.on('click', options.elem, function(){
options.elemPhone = $(options.elemPhone);
options.elemVercode = $(options.elemVercode);
var elemPhone = options.elemPhone
var elemVercode = options.elemVercode
,value = elemPhone.val() //手机号
,vercode = elemVercode.val();//此处我加入图片验证码校验
if(seconds !== options.seconds || $(this).hasClass(DISABLED)) return;
if(!/^1\d{10}$/.test(value)){
elemPhone.focus();
return layer.msg('请输入正确的手机号')
};
if(typeof options.ajax === 'object'){
var success = options.ajax.success;
delete options.ajax.success;
}
admin.req($.extend(true, {
url: '/sendCode'//自己接口
,type: 'get'
,data: {
cellphone: value,//手机号
vercode: vercode,//短信验证码
uuid :$("#uuid").val()//此处我生成的uuid
}
,success: function(res){
if(res.code==0){
layer.msg('验证码已发送至你的手机,请注意查收', {
icon: 1
,shade: 0
});
options.elemVercode.focus();
countDown();
success && success(res);
}else {
//提示登录失败
layer.msg(res.msg, {
offset: '15px'
,icon: 1
,time:1000
});
//刷新验证码
$("#LAY-user-login-vercode").val("");
$("#LAY-user-get-vercode").attr("src","/vcode.jpg?t="+ new Date().getTime());
}
}
}, options.ajax));
});
}
//页面中
//发送短信验证码
admin.sendAuthCode({
elem: '#LAY-user-forget-getsmscode'
,elemPhone: '#LAY-user-login-cellphone'
,elemVercode: '#LAY-user-login-vercode'
//在admin.js中发送ajax
});
校验验证码 以及 重置密码
//找回密码下一步
form.on('submit(LAY-user-forget-submit)', function(obj){
var field = obj.field;
var mobile = field.cellphone;
//请求接口
admin.req({
url: '/checkCode' //实际使用请改成服务端真实接口
,data: field
,done: function(res){
if (res.data.request){
location.hash = router.href + '/type=resetpass/mobile='+mobile;
}else {
layer.msg("短信验证码不正确", {icon: 5});
}
}
});
return false;
});
//重置密码
form.on('submit(LAY-user-forget-resetpass)', function(obj){
var field = obj.field;
var router = layui.router();
field.mobile = router.search.mobile
//确认密码
if(field.password !== field.repass){
return layer.msg('两次密码输入不一致');
}
//请求接口
admin.req({
url: '/resPassword' //实际使用请改成服务端真实接口
,data: field
,done: function(res){
layer.msg('密码已成功重置', {
offset: '15px'
,icon: 1
,time: 1000
}, function(){
location.hash = '/user/login'; //跳转到登入页
});
}
});
return false;
});