既然登录注册模块是涉及到用户的项目开发中不可缺少的部分，那么忘记密码可以说是和用户登录相辅的功能了，此文归纳在实际项目开发中忘记密码模块的一些思路和通用代码块，当然也有其不足之处，望各位多多指教。
忘记密码和注册模块有其相似之处，比如发送验证码，其不同之处在于忘记密码进行找回密码时，有多种途径可选，看具体的项目而定。
1. 忘记密码模块：
相比较而言，忘记密码还是比较简单，一般就是手机、邮箱、密保问题三项找回密码，手机、邮箱是需要短信验证码校验的。
理一理逻辑：点击忘记密码，进入账号输入界面，通过账号获取用户可以通过哪几种方式找回密码；手机号和短信验证码校验进入重置密码界面；邮箱号和信息验证码校验进入重置密码界面；密保问题和答案校验进入重置密码界面；重置密码；监听回车按钮重置密码。
-
界面的切换，可以通过<div></div>的显示隐藏实现，这里不再赘述。
-
通过账号信息，调用后台api，获取用户绑定信息，判断用户找回密码的方式是否可以。
-
手机校验，事先校验手机号，发送短信验证码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
var flag = true;
$("#inputGetVerify").on("click", function () {
$("#inputTel").blur();
if (inputTelStatus == 1) {
if (flag) {
flag = false;
$(this).css({
"background": "#999999"
});
var timer,wait = 60;
function time() {
if (wait == 0) {
$("#inputGetVerify").css({
"background": "#fff"
});
$("#inputGetVerify").text("获取验证码");
wait = 60;
flag = true;
} else {
$("#inputGetVerify").text("重新发送(" + wait + ")");
wait--;
timer = setTimeout(function () {
time();
},
1000);
}
}
time();
$.post("/api/Account/RegSendSms", { phone: $.trim($("#inputTel").val()) }, function (json) {
if (json.code != 1) {
$("#inputGetVerify").css("background", "#fff").text("获取验证码");
clearTimeout(timer);
flag = true;
$(".tisi").html(json.data);
}
});
} else {
return;
}
} else {
return;
}
});
var inputTelStatus = 0;
$("#inputTel").blur(function(){
if((/^[1-9]\d*$/.test($("#inputTel").val()))){
inputTelStatus = 1;
} else {
inputTelStatus = 0;
$(".tisi").html("请输入正确的手机号码！");
}
});
|
- 校验手机。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| $("#checkBtn").on("click", function () {
$("#inputTel1").blur();
if ($("#inputTel1").val() == "" || inputTelStatus == 0) {
$(".tisi").html("请输入正确的手机号码！");
} else if ($("#inputCode").val() == "") {
$(".tisi").html("请输入验证码！");
} else {
$("#checkBtn").text("校验中..").css({ "color": "#cccccc" }).attr("disabled", "disabled");
$.post("/api/Account/RetCheckSms", { phone: $.trim($("#inputTel1").val()), code: $.trim($("#inputCode1").val()), s: 0 }, function (json) {
if (json.code == 1) {
$(".search-title").text("重置密码");
$(".jiaoyan-box").show();
$(".jiaoyan-box .shouji-yanzheng").hide();
$(".jiaoyan-box .reset-psswd").show();
Token = json.data;
} else {
$(".tisi").html(json.data);
$("#checkBtn").text("确 认").css({ "color": "#444" }).removeAttr("disabled");
}
});
}
})
|
邮箱方式找回和手机找回类似，密保问题找回只需要在用户输入账号信息之后调用api获取用户设置的密保信息载入DOM，参照【4】提交校验即可。
- 重置密码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| $("#Reset").click(function () {
$("#password").blur();
$("#second-password").blur();
$("#Reset").text("重置中..").css({ "color": "#cccccc" }).attr("disabled", "disabled");
if (passwordstatus == 1 && secondpasswordstatus == 1) {
$.post("/api/Account/ReSetPass", { token: Token, s: 1, userpass: $("#password").val() }, function (json) {
if (json.code == 1) {
tip(json.data, function () {
location.href = "/Home/Login";
})
} else {
$(".tisi").html(json.data);
}
});
} else {
return;
}
});
|
** 附： ** 登录、注册、找回密码涉及到较多的用户提示，下面附上常用的dialog弹框框架，点击下载css、下载js，封装了一个提示型和确定回调型方法，当然，你还可以写的更加完美。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| function tip(discription, fn) {
if (fn) {
javascript: $('body').dialog({
title: "提示",
titleFontSize: "16px",
type: 'primary',
showBoxShadow: true,
buttons: [{ name: '确定', className: 'danger reload' }],
discription: discription,
animateIn: 'fadeInRight-hastrans',
animateOut: 'fadeOutRight-hastrans',
duration: 0
}, function (ret) { if (ret.index === 0) { fn(); } });
} else {
javascript: $('body').dialog({
title: "提示",
titleFontSize: "16px",
type: 'primary',
showBoxShadow: true,
buttons: [{ name: '确定', className: 'danger' }],
discription: discription,
animateIn: 'fadeInRight-hastrans',
animateOut: 'fadeOutRight-hastrans',
duration: 0,
});
}
}
|