Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6404453

Browse files
手机账号登陆逻辑验证
1 parent f42e768 commit 6404453

File tree

6 files changed

+313
-135
lines changed

6 files changed

+313
-135
lines changed

‎src/assets/utils/utils.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,24 @@ const utils = {
2727
return Array.from(new Set(arr))
2828
},
2929

30+
// 🔥是否为正确的QQ号码、微信号、QQ邮箱
31+
// - [微信号正则校验,qq正则,邮箱正则,英文名正则](https://blog.csdn.net/qq_29091239/article/details/80075981)
32+
// - [微信号正则校验](https://blog.csdn.net/unknowna/article/details/50524529)
33+
validQQ(qq){
34+
let regex = /^[1-9][0-9]{4,9}$/g
35+
return regex.test(qq)
36+
},
37+
38+
validWeChatId(id){
39+
let regex = /^[a-zA-Z]{1}[-_a-zA-Z0-9]{5,19}$/g
40+
return regex.test(id)
41+
},
42+
43+
validQQMail (mail){
44+
let regex = /^[1-9][0-9]{4,9}@qq\.com$/g
45+
return regex.test(mail)
46+
},
47+
3048
// 🔥是否为有效电话号码
3149
// - [一组匹配中国大陆手机号码的正则表达式](https://github.com/VincentSit/ChinaMobilePhoneNumberRegex)
3250
validMobile(mobile) {
@@ -38,10 +56,6 @@ const utils = {
3856
// - [手机格式化](https://blog.csdn.net/Wangdanting123/article/details/86938915)
3957
// - [格式化手机号](https://segmentfault.com/q/1010000004508861)
4058
formatMobile344(mobile) {
41-
let regex = /((?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[35678]\d{2}|4(?:0\d|1[0-2]|9\d))|9[189]\d{2}|66\d{2})\d{6})+?/g
42-
if (!regex.test(mobile)) {
43-
return mobile
44-
}
4559
return (mobile + '').replace(/(^\d{3}|\d{4}\B)/g, '1ドル ')
4660
},
4761

@@ -57,7 +71,7 @@ const utils = {
5771

5872
// 纯数字 ^[0-9]*$
5973
pureDigitCharacters (str) {
60-
let regex = /^[0-9]*$/
74+
let regex = /^[0-9]*$/gi
6175
return regex.test(str)
6276
}
6377
}

‎src/views/login/CurrentLogin.vue‎

Lines changed: 79 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,13 @@
7373
</div>
7474
</div>
7575
<div class="mh-current-login__cell-ft">
76-
<div class="captcha-btn">获取验证码</div>
76+
<div
77+
@click="captchaAction"
78+
class="lg-captcha-btn"
79+
:class="{ 'lg-captcha-btn--disabled': captchaBtnDisabled }"
80+
>
81+
{{ captchaTitle }}
82+
</div>
7783
</div>
7884
</div>
7985
</transition>
@@ -139,15 +145,21 @@ export default {
139145
password: "",
140146
// 验证码
141147
captcha: "",
148+
// 验证码名称
149+
captchaTitle: "获取验证码",
150+
// 验证码是否不可点击
151+
captchaBtnDisabled: false,
142152
// 是否输错过密码
143153
inputPasswordError: false,
144154
// 是否输错过验证码
145-
inputCaptchaError: false
155+
inputCaptchaError: false,
156+
// 定时器
157+
timer: 0,
158+
// timerMaxCount 定时器最大时间
159+
timerMaxCount: 60
146160
};
147161
},
148162
created() {
149-
console.log(this.$route.name + " 👉 " + window.history.length);
150-
console.log(this.user);
151163
// 配置数据
152164
this.initialize();
153165
// 配置
@@ -163,6 +175,10 @@ export default {
163175
// 配置数据
164176
this.showPasswordWay = this.user.channel !== "Mobile Phone";
165177
this.password = this.captcha = "";
178+
this.timer = 0;
179+
this.captchaBtnDisabled = false;
180+
this.captchaTitle = "获取验证码";
181+
this.timerMaxCount = 60;
166182
},
167183
168184
// 底部更多面板点击事件
@@ -275,6 +291,62 @@ export default {
275291
},
276292
clearAllCaptcha() {
277293
this.captcha = "";
294+
},
295+
// 获取验证码
296+
captchaAction() {
297+
// 按钮不可点击,则过滤
298+
if (this.captchaBtnDisabled) return;
299+
300+
// 1、验证手机号是否correct
301+
if (!Utils.validMobile(this.user.phone)) {
302+
let content = "你输入的是一个无效的手机号码";
303+
let title = "手机号码错误";
304+
this.$weui.alert(content, { title: title });
305+
return;
306+
}
307+
308+
// 2、弹出有提示
309+
let content = "我们将发送验证码短信到这个号码:" + this.account;
310+
this.$weui.confirm(content, {
311+
title: "确认手机号码",
312+
buttons: [
313+
{
314+
label: "取消",
315+
type: "default"
316+
},
317+
{
318+
label: "好",
319+
type: "primary",
320+
onClick: this.fetchCaptcha
321+
}
322+
]
323+
});
324+
},
325+
// 获取验证码
326+
fetchCaptcha() {
327+
// 获取验证码
328+
this.captchaBtnDisabled = true;
329+
this.captchaTitle = "发送中...";
330+
// 先开启一个简短的延时
331+
setTimeout(() => {
332+
this.timerMaxCount = 60;
333+
this.captchaTitle = "60s后重新发送";
334+
this.timer = window.setInterval(this.timerValueChanged, 1000);
335+
}, 1000);
336+
},
337+
338+
// 定时器事件
339+
timerValueChanged() {
340+
this.timerMaxCount--;
341+
if (this.timerMaxCount === 0) {
342+
// 20190727 Fixed Bug : 指明 window,否则报错
343+
window.clearInterval(this.timer);
344+
this.timer = 0;
345+
this.captchaBtnDisabled = false;
346+
this.captchaTitle = "获取验证码";
347+
return;
348+
}
349+
this.captchaTitle = this.timerMaxCount + "后重新发送";
278350
}
279351
},
280352
computed: {
@@ -312,6 +384,7 @@ export default {
312384
};
313385
</script>
314386

387+
<style src="./css/login.css" scoped></style>
315388
<style scoped>
316389
.left-enter {
317390
-webkit-transform: translate(100%, 0);
@@ -422,16 +495,6 @@ export default {
422495
padding: 0 20px;
423496
}
424497
425-
/* 获取验证码 */
426-
.captcha-btn {
427-
border: 1px solid #353535;
428-
color: #353535;
429-
background-color: transparent;
430-
padding: 2px 5px;
431-
font-size: 13px;
432-
border-radius: 3px;
433-
}
434-
435498
/* 底部更多列表 */
436499
.mh-current-login__more {
437500
position: absolute;
@@ -450,7 +513,7 @@ export default {
450513
451514
.mh-current-login__more-item {
452515
position: relative;
453-
padding: 0 10px;
516+
padding: 0 16px;
454517
}
455518
456519
.mh-current-login__more-item:not(:last-child)::after {
@@ -460,7 +523,7 @@ export default {
460523
top: 0;
461524
right: 0;
462525
bottom: 0;
463-
background-color: #000;
526+
background-color: #888;
464527
-webkit-transform: scaleY(0.5);
465528
-ms-transform: scaleY(0.5);
466529
transform: scaleY(0.5);

‎src/views/login/OtherLogin.vue‎

Lines changed: 35 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,10 @@ import ActionSheet, {
126126
} from "components/actionSheet/ActionSheet";
127127
// 账号存储
128128
import AccountHelper from "@/assets/js/account/account";
129+
// 工具类
130+
import Utils from "assets/utils/utils";
131+
// UserModel
132+
import UserModel from "./js/user";
129133
export default {
130134
name: "OtherLogin",
131135
data() {
@@ -150,17 +154,18 @@ export default {
150154
},
151155
mounted() {},
152156
methods: {
157+
// 初始化数据
158+
// 初始化
159+
initialize() {},
160+
161+
// 切换方式的按钮点击事件
153162
changeBtnDidClick() {
154163
this.showPasswordWay = !this.showPasswordWay;
155164
},
156165
// 底部更多面板事件处理
157166
itemDidClick(idx) {
158-
switch (idx) {
159-
case 0:
160-
break;
161-
default:
167+
if (idx === 1) {
162168
this.showActionSheet = true;
163-
break;
164169
}
165170
},
166171
// 配置actionsheet items
@@ -176,15 +181,6 @@ export default {
176181
// ActionSheet 事件处理
177182
didClickItem(idx) {
178183
if (idx === 0) return;
179-
switch (idx) {
180-
case 1:
181-
this.$router.push({ name: "setting" });
182-
break;
183-
case 2:
184-
break;
185-
default:
186-
break;
187-
}
188184
},
189185
// 登陆事件
190186
login() {
@@ -203,37 +199,31 @@ export default {
203199
});
204200
} else {
205201
// 对账号做验证 TODO
206-
207-
// 登陆账号
208-
// 模拟网络加载
202+
// 1、正确的QQ号 2、密码8-16位且不含中文
203+
if (
204+
!Utils.validQQ(this.account) ||
205+
this.password.length < 8 ||
206+
this.password.length > 16 ||
207+
Utils.includeChinese(this.password)
208+
) {
209+
this.$weui.alert("", { title: "账号或密码错误,请重新填写" });
210+
return;
211+
}
212+
// 登陆账号 模拟网络加载
213+
// 显示loading
214+
let loading = this.$weui.loading("请稍后...");
209215
setTimeout(() => {
210-
const user = {
211-
/// PS: 假设请求到数据模型是 User模型
212-
screen_name: "Mike-乱港三千-Mr_元先森",
213-
idstr: "61856069",
214-
profile_image_url:
215-
"http://tva3.sinaimg.cn/crop.0.6.264.264.180/93276e1fjw8f5c6ob1pmpj207g07jaa5.jpg",
216-
avatar_large: "",
217-
/// 用户的封面
218-
coverImageUrl:
219-
"http://p1.gexing.com/G1/M00/7A/83/rBACE1TW-cjDb2yHAAGORXsJM6w706.jpg",
220-
coverImage: "Kris.jpeg",
221-
222-
/// 假设是这里统一都是qq号码登录
223-
qq: this.account,
224-
email: this.account + "@qq.com", // PS:机智,拼接成QQ邮箱
225-
wechatId: "codermikehe", // PS:瞎写的
226-
phone: "13874385438", // PS:瞎写的
227-
// 登陆渠道:QQ登陆
228-
channel: "QQ",
229-
// -- 0 Boy -- 1 Girl
230-
gender: 0,
231-
// 个新签名
232-
featureSign: "生死看淡,不服就干"
233-
};
216+
// 隐藏loading
217+
loading.hide();
218+
// 假设获取到了数据
219+
let user = Object.assign({}, UserModel);
220+
user.qq = this.account;
221+
user.emial = this.account + "@qq.com"; // PS:机智,拼接成QQ邮箱
222+
user.phone = "13874385438"; // PS:瞎写的
223+
user.channel = "QQ";
234224
// 登陆
235225
AccountHelper.login(user, this.account);
236-
}, 3000);
226+
}, 1000);
237227
}
238228
},
239229
// 跳转地区列表
@@ -252,7 +242,6 @@ export default {
252242
253243
// 登录按钮是否无效
254244
loginBtnDisabled() {
255-
console.log("🔥😴😿", this.account);
256245
return this.showPasswordWay
257246
? this.phone.length <= 0
258247
: this.account.length <= 0 || this.password.length <= 0;
@@ -297,11 +286,11 @@ export default {
297286
overflow: hidden;
298287
position: relative;
299288
margin-top: 90px;
300-
height: 168px;
289+
height: 170px;
301290
}
302291
303292
.mh-current-login__panel {
304-
height: 168px;
293+
height: 170px;
305294
}
306295
.mh-current-login__panel h1 {
307296
font-size: 24px;
@@ -527,7 +516,7 @@ export default {
527516
528517
.mh-current-login__more-item {
529518
position: relative;
530-
padding: 0 10px;
519+
padding: 0 16px;
531520
}
532521
533522
.mh-current-login__more-item:not(:last-child)::after {

‎src/views/login/css/login.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* 这个公用css样式,服务login这个模块 换血lg*/
2+
/* ------------------------------ */
3+
/* 获取验证码 */
4+
.lg-captcha-btn {
5+
border: 1px solid #353535;
6+
color: #353535;
7+
background-color: transparent;
8+
font-size: 13px;
9+
border-radius: 3px;
10+
height: 25px;
11+
line-height: 25px;
12+
padding: 0 5px;
13+
}
14+
.lg-captcha-btn--disabled {
15+
border: 1px solid #999;
16+
color: #999;
17+
}

‎src/views/login/js/user.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export default {
2+
/// PS: 假设请求到数据模型是 User模型 死数据
3+
screen_name: "Mike-乱港三千-Mr_元先森",
4+
idstr: "61856069",
5+
profile_image_url:
6+
"http://tva3.sinaimg.cn/crop.0.6.264.264.180/93276e1fjw8f5c6ob1pmpj207g07jaa5.jpg",
7+
avatar_large: "",
8+
/// 用户的封面
9+
coverImageUrl:
10+
"http://p1.gexing.com/G1/M00/7A/83/rBACE1TW-cjDb2yHAAGORXsJM6w706.jpg",
11+
coverImage: "Kris.jpeg",
12+
wechatId: "codermikehe", // PS:瞎写的
13+
// 个新签名
14+
featureSign: "生死看淡,不服就干",
15+
gender: 0, // -- 0 Boy/1 Girl
16+
17+
// 以下这几项有可能需要改变
18+
qq: '', // 假设是这里统一都是qq号码登录
19+
email: '', // PS:机智,拼接成QQ邮箱
20+
phone: '', // PS:瞎写的
21+
channel: '' // 登陆渠道:QQ/Mobile Phone
22+
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /