-
Notifications
You must be signed in to change notification settings - Fork 0
/
login.html
149 lines (148 loc) · 5.46 KB
/
login.html
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录-闲言</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="res/layui/css/layui.css">
<link rel="stylesheet" href="res/static/css/mian.css">
<link href="http://cdn.bootcss.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="res/static/css/login.css">
</head>
<body class="lay-blog">
<div class="container">
<div class="logo">
<span class="logo-pic"></span>
<span class="logo-text">闲言</span>
<div class="motto">
记 录 生 活 留 住 感 动
</div>
</div>
<div class="log-wrap" >
<div class="log-center">
<div class="log-head"><span></span>闲言<span></span></div>
<form class="log-form">
<input type="text" placeholder="使用邮箱登录" name="username" value="" id="account">
<input type="password" name="pwd" value="" placeholder="密码" id="pwd">
<span class="log-button">登录</span>
</form>
<div class="register-href">
<span class="tips">您输入的账户不正确</span>
<a href="register.html" style="float: right">点我注册</a> <span
style="float: right">没有帐号？</span>
</div>
</div>
</div>
</div>
<div class="log-footer">
<p>
<span>© 2019</span>
<span>浙江大学软件学院</span>
<span>S403</span>
</p>
</div>
<script src="res/jquery/jquery-1.12.4.js"></script>
<script src="res/layui/layui.js"></script>
<script>
layui.config({
base: 'res/static/js/'
}).use('blog');
</script>
<script>
$(function () {
// 获取email账号
let $account = $('#account');
let tips =$('.tips');
$account.focus();
let account = $account.val();
$account.on('change',function () {
account = $account.val();
});
$account.on('blur',function () {
let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if (reg.test(account)) { // 账号符合格式要求
$.ajax({
url:'http://47.100.226.85:8080/find-friends/user/validemail',
type: 'post',
data: account,
success:function (data) { // 账号是否注册过
if(data){
tips.css('opacity','1');
tips.text('您输入的账号未注册');
$account.val('');
$account.focus();
account ='';
let timer1= setTimeout(function () {
tips.css('opacity','0');
clearTimeout(timer1);
},3000);
}
},
contentType: "application/json",
});
} else if(account.length>0){ // 输入了账号但不符合格式要求
tips.css('opacity','1');
tips.text('您输入的账号格式错误');
$account.val('');
$account.focus();
account ='';
let timer= setTimeout(function () {
tips.css('opacity','0');
clearTimeout(timer);
},3000);
}
});
// 获取密码
let $pwd = $('#pwd');
let pwd =$pwd.val();
$pwd.on('change',function () {
pwd = $pwd.val();
});
// 登录提交
$('.log-button').on('click',function () {
let data = {
'email':account,
'password':pwd
};
$.ajax({
url:'http://47.100.226.85:8080/find-friends/user/login',
xhrFields:{
withCredentials:true
},
type:'post',
data: JSON.stringify(data),
contentType: "application/json",
success: function (data) {
// 密码正确，把数据存在local storage
if(data !=='incorrect password'){
localStorage.setItem("UserAccount", JSON.stringify(data));
window.location.href = 'index.html';
}
// 密码错误
else{
tips.css('opacity','1');
tips.text('您输入的密码错误！');
$pwd.val('');
$pwd.focus();
let timer1= setTimeout(function () {
tips.css('opacity','0');
clearTimeout(timer1);
},3000);
}
},
error:function(){
tips.css('opacity','1');
tips.text('哦豁，服务器好像罢工了');
$pwd.val('');
$pwd.focus();
let timer1= setTimeout(function () {
tips.css('opacity','0');
clearTimeout(timer1);
},3000);
},
})
});
});
</script>
</body>
</html>