Skip to content

Commit c87be9c

Browse files
bing127bing127
committed
修复注册邮箱验证码的问题
1 parent d1c15d4 commit c87be9c

File tree

2 files changed

+172
-93
lines changed

2 files changed

+172
-93
lines changed

‎app/view/layouts/user/register.nsp‎

Lines changed: 162 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,179 @@
11
{% include "../../includes/common.nsp" %}
22
<title>{{ product.productDescription }} 注册</title>
33
<style>
4-
#messageBox{
5-
color: #cc5965;
6-
}
7-
form .form-left {
8-
width: 72%;
9-
float: left;
10-
}
11-
form .form-right {
12-
float: right;
13-
width: 24%;
14-
}
15-
form .form-left input{
16-
height: 44px;
17-
font-size: 16px;
18-
text-indent: 0;
19-
outline: none;
20-
padding: 0 16px;
21-
box-sizing: border-box;
22-
color: #fff;
23-
}
24-
#code{
25-
overflow: hidden;
26-
border-radius: 6px;
27-
height: 44px;
28-
}
4+
#messageBox{
5+
font-weight: bold;
6+
}
7+
.fail {
8+
color: #cc5965;
9+
}
10+
.success {
11+
color: #fff;
12+
}
13+
form .form-left {
14+
width: 72%;
15+
float: left;
16+
}
17+
18+
form .form-right {
19+
float: right;
20+
width: 24%;
21+
}
22+
23+
form .form-left input {
24+
height: 44px;
25+
font-size: 16px;
26+
text-indent: 0;
27+
outline: none;
28+
padding: 0 16px;
29+
box-sizing: border-box;
30+
color: #fff;
31+
}
32+
33+
#code {
34+
overflow: hidden;
35+
border-radius: 6px;
36+
height: 44px;
37+
}
38+
39+
.form-right button {
40+
height: 44px;
41+
background: rgba(0, 0, 0, 0);
42+
border: 1px solid #ccc;
43+
border-radius: 6px;
44+
width: 100%;
45+
}
2946
</style>
3047
<script>
31-
if (window.top !== window.self) {
32-
window.top.location = window.location;
33-
}
48+
if (window.top !== window.self) {
49+
window.top.location = window.location;
50+
}
3451
</script>
3552
<script type="text/javascript">
36-
$(document).ready(function () {
37-
$("#loginForm").validate({
38-
rules: {},
39-
messages: {
40-
username: {required: "请填写用户名."}, password: {required: "请填写密码."},
41-
validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
42-
},
43-
errorLabelContainer: "#messageBox",
44-
errorPlacement: function (error, element) {
45-
error.appendTo($("#loginError").parent());
46-
}
47-
});
48-
});
49-
// 如果在框架或在对话框中，则弹出提示并跳转到首页
50-
if (self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0) {
51-
alert('未登录或登录超时。请重新登录，谢谢！');
52-
top.location = "/";
53-
}
53+
$(document).ready(function () {
54+
$("#loginForm").validate({
55+
rules: {
56+
},
57+
submitHandler: function (form) {
58+
jp.loading();
59+
form.submit();
60+
},
61+
messages: {
62+
confirmNewPassword: {equalTo: "输入与上面相同的密码"},
63+
username: {remote: "此用户名已经被注册!", required: "请填写用户名."},
64+
password: {required: "请填写密码."},
65+
mail: {required: "请填写邮箱."},
66+
validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
67+
},
68+
errorContainer: "#messageBox",
69+
errorPlacement: function (error, element) {
70+
$("#messageBox").text("输入有误，请先更正。");
71+
error.insertAfter(element);
72+
}
73+
});
74+
});
75+
76+
jQuery.validator.addMethod("isMail", function (value, element) {
77+
var length = value.length;
78+
var email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
79+
return this.optional(element) || (email.test(value))
80+
}, "邮箱格式不正确");
81+
// 如果在框架或在对话框中，则弹出提示并跳转到首页
82+
if (self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0) {
83+
alert('未登录或登录超时。请重新登录，谢谢！');
84+
top.location = "${ctx}";
85+
}
5486
</script>
5587
<body>
5688
<div class="login-page">
57-
<div class="row">
58-
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4" style="margin-top:5%">
59-
<img class="img-circle" src="/public/static/common/images/flat-avatar.png" class="user-avatar"/>
60-
<h1>{{ product.productName }}</h1>
61-
<div id="messageBox" showType="1">
62-
{{ msg }}
63-
</div>
64-
<form id="loginForm" role="form" action="/sys/loginAction" method="post">
65-
<div class="form-content">
66-
<div class="form-group">
67-
<input type="text" id="username" name="username"
68-
class="form-control input-underline input-lg required" autocomplete="off"
69-
placeholder="用户名">
70-
</div>
71-
<div class="form-group">
72-
<input type="password" id="password" name="password" autocomplete="off"
73-
class="form-control input-underline input-lg required" placeholder="密码">
74-
</div>
75-
<div class="form-group">
76-
<input type="password" id="mail" name="password" autocomplete="off"
77-
class="form-control input-underline input-lg required" placeholder="邮箱">
78-
</div>
79-
<div class="form-group clearfix">
80-
<div class="form-left">
81-
<input type="text" id="validateCode" placeholder="请输入右侧答案" name="validateCode" autocomplete="off" maxlength="5"
82-
class="txt required pull-left input-underline" style="line-height:44px;width: 100%"
83-
aria-required="true">
84-
</div>
85-
<div class="form-right" onclick="changeCaptcha()">
86-
获取邮箱验证码
87-
</div>
88-
</div>
89+
<div class="row">
90+
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4" style="margin-top:5%">
91+
<img class="img-circle" src="/public/static/common/images/flat-avatar.png" class="user-avatar"/>
92+
<h1>{{ product.productName }}</h1>
93+
{% if msg %}
94+
<div id="messageBox" class="{{ 'success' if success else 'fail' }}">
95+
{{ msg }}
96+
</div>
97+
{% endif %}
98+
<form id="loginForm" role="form" action="/sys/regAction" method="post">
99+
<div class="form-content">
100+
<div class="form-group">
101+
<input type="text" id="username" name="username" maxlength="20" minlength="3"
102+
class="form-control input-underline input-lg required" autocomplete="off"
103+
placeholder="用户名">
104+
</div>
105+
<div class="form-group">
106+
<input type="password" maxlength="20" minlength="3" id="password" name="password" autocomplete="off"
107+
class="form-control input-underline input-lg required" placeholder="密码">
108+
</div>
109+
<div class="form-group">
110+
<input type="password" maxlength="20" minlength="3" id="confirmNewPassword" name="confirmNewPassword" autocomplete="off"
111+
class="form-control input-underline input-lg required" equalTo="#password"
112+
placeholder="重复密码">
113+
</div>
114+
<div class="form-group">
115+
<input type="text" id="mail" name="mail" autocomplete="off"
116+
class="form-control input-underline input-lg required isMail" placeholder="邮箱">
117+
</div>
118+
<div class="form-group clearfix">
119+
<div class="form-left">
120+
<input type="text" id="validateCode" placeholder="请输入邮箱验证码" name="validateCode"
121+
autocomplete="off" maxlength="6" minlength="6"
122+
class="txt required pull-left input-underline" style="line-height:44px;width: 100%"
123+
aria-required="true">
124+
</div>
125+
<div class="form-right" id="code" onclick="getCode()">
126+
<button>获取验证码</button>
127+
</div>
128+
</div>
129+
<input type="reset" class="btn btn-white btn-outline btn-lg btn-rounded progress-login" value="重置">
130+
<input type="submit" class="btn btn-white btn-outline btn-lg btn-rounded progress-login" value="注册">
131+
</div>
132+
</form>
133+
<div class="form-values center">
134+
<a href="/sys/login" data-target="#login-box" class="">
135+
<font color="#fff"><i class="ace-icon fa fa-arrow-left"></i>
136+
返回登录
137+
</font>
138+
</a>
139+
</div>
140+
</div>
89141
</div>
90-
<input type="submit" class="btn btn-white btn-outline btn-lg btn-rounded progress-login" value="登录">
91-
<a href="/sys/register" class="btn btn-white btn-outline btn-lg btn-rounded progress-login">注册</a>
92-
</form>
93-
</div>
94-
</div>
142+
</div>
95143
</div>
96144
<script>
145+
var timep = 600;
146+
147+
function getCode() {
148+
jp.post('/sys/sendmail',{
149+
data:$('#mail').val()
150+
},function (ret) {
151+
if (ret.success){
152+
jp.success(ret.msg);
153+
countdown();
154+
} else {
155+
jp.warning(ret.msg)
156+
}
157+
})
158+
}
159+
97160

161+
function countdown() {
162+
if (timep == 0) {
163+
obj.disabled = false;
164+
$('#code').find('button').attr('disabled', false);
165+
$('#code').find('button').text('获取验证码');
166+
timep = 600;
167+
return;
168+
} else {
169+
$('#code').find('button').attr('disabled', true);
170+
$('#code').find('button').text(timep + 's');
171+
timep--;
172+
}
173+
setTimeout(function () {
174+
countdown();
175+
}, 1000)
176+
};
98177
</script>
99178
</body>
100179
</html>

‎package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "NodeJs快速开发框架",
55
"private": true,
66
"dependencies": {
7-
"egg": "^2.14.2",
7+
"egg": "^2.20.1",
88
"egg-scripts": "^2.11.0"
99
},
1010
"devDependencies": {
@@ -13,29 +13,29 @@
1313
"autod-egg": "^1.1.0",
1414
"await-stream-ready": "^1.0.1",
1515
"captchapng2": "^1.0.3",
16-
"dayjs": "^1.8.0",
17-
"egg-bin": "^4.10.0",
16+
"dayjs": "^1.8.10",
17+
"egg-bin": "^4.11.1",
1818
"egg-ci": "^1.11.0",
19-
"egg-mock": "^3.21.0",
19+
"egg-mock": "^3.22.1",
2020
"egg-oss": "^2.0.0",
2121
"egg-redis": "^2.3.0",
2222
"egg-sequelize": "^4.3.1",
2323
"egg-sms": "^1.0.2",
2424
"egg-view-nunjucks": "^2.2.0",
25-
"eslint": "^5.12.1",
26-
"eslint-config-egg": "^7.1.0",
27-
"internal-ip": "^3.0.1",
25+
"eslint": "^5.15.1",
26+
"eslint-config-egg": "^7.2.0",
27+
"internal-ip": "^4.2.0",
2828
"koa-compress": "^3.0.0",
2929
"ljtools": "^1.0.12",
3030
"lodash": "^4.17.11",
31-
"mathjs": "^5.4.1",
31+
"mathjs": "^5.7.0",
3232
"md5": "^2.2.1",
33-
"mysql2": "^1.6.4",
33+
"mysql2": "^1.6.5",
3434
"node-version": "^1.2.0",
3535
"nodemailer": "^5.1.1",
3636
"os": "^0.1.1",
3737
"print-message": "^2.1.0",
38-
"restify": "^7.6.0",
38+
"restify": "^8.1.0",
3939
"server-health": "^3.0.0",
4040
"sharp": "^0.21.3",
4141
"simple-encryptor": "^2.0.0",

0 commit comments

Comments
 (0)