Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
T
techbook
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
front-end-dev
techbook
Commits
2e3b07be
Commit
2e3b07be
authored
Aug 15, 2019
by
zhangyanni
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
手机号登录的一些正则
parent
c9eeb91c
Show whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
131 additions
and
19 deletions
+131
-19
login-bg@2x.jpg
src/assets/img/login/login-bg@2x.jpg
+0
-0
login-bg@2x.png
src/assets/img/login/login-bg@2x.png
+0
-0
validate.js
src/common/validate.js
+51
-0
mobileLoginCmpt.vue
src/components/login/mobileLoginCmpt.vue
+73
-16
main.js
src/main.js
+6
-2
login.vue
src/views/loginregister/pages/login.vue
+1
-1
No files found.
src/assets/img/login/login-bg@2x.jpg
0 → 100644
View file @
2e3b07be
306 KB
src/assets/img/login/login-bg@2x.png
deleted
100755 → 0
View file @
c9eeb91c
This diff is collapsed.
Click to expand it.
src/common/validate.js
0 → 100644
View file @
2e3b07be
export
default
{
//验证手机号码
checkMobile
(
rule
,
value
,
callback
)
{
var
reg
=
/^1
[
3456789
]\d{9}
$/
;
if
(
value
===
''
)
{
callback
(
new
Error
(
'请输入手机号'
));
}
else
if
(
!
reg
.
test
(
value
))
{
callback
(
new
Error
(
'填写正确的手机号'
));
}
else
{
callback
();
}
},
//验证密码格式
checkPassWord
(
rule
,
value
,
callback
){
var
reg
=
/
(?!
^
[
0-9
]
+$
)(?!
^
[
A-z
]
+$
)(?!
^
[^
A-z0-9
]
+$
)
^.
{6,18}
$/
;
if
(
value
===
''
){
callback
(
new
Error
(
'请输入密码'
));
}
else
if
(
!
reg
.
test
(
value
)){
callback
(
new
Error
(
'密码格式不正确'
));
}
else
{
callback
();
}
},
//验证码
checkCode
(
rule
,
value
,
callback
){
var
reg
=
/^
[
0-9
]{4,6}
$/
;
if
(
value
===
''
){
callback
(
new
Error
(
'请填写验证码'
));
}
else
if
(
!
reg
.
test
(
value
)){
callback
(
new
Error
(
'请输入正确格式的验证码'
));
}
else
{
callback
();
}
},
//验证只支持数字
checkNumber
(
rule
,
value
,
callback
){
var
reg
=
/^
[
0-9
]
*$/
;
if
(
value
===
''
){
callback
(
new
Error
(
'请填写手机号'
));
}
else
if
(
!
reg
.
test
(
value
)){
callback
(
new
Error
(
'请输入正确格式的手机号'
));
}
else
{
callback
();
}
},
}
\ No newline at end of file
src/components/login/mobileLoginCmpt.vue
View file @
2e3b07be
<
template
>
<div
class=
"wrapper"
>
<p>
欢迎登录TechBook
</p>
<el-tabs
v-model=
"activeName"
@
tab-click=
"handleTab"
>
<el-tabs
v-model
.
trim
=
"activeName"
@
tab-click=
"handleTab"
>
<el-tab-pane
label=
"密码登录"
name=
"first"
>
<el-form
:model=
"loginForm"
:rules=
"rules"
ref=
"loginForm"
class=
"demo-loginForm"
>
<el-form-item
prop=
"mobile"
required
>
<el-input
v-model=
"loginForm.mobile"
placeholder=
"请输入手机号"
autocomplete
></el-input>
<el-form-item
prop=
"mobile"
>
<el-input
v-model
.
trim
=
"loginForm.mobile"
placeholder=
"请输入手机号"
autocomplete
></el-input>
</el-form-item>
<el-form-item
prop=
"pass"
required
style=
"margin-bottom: 10px !important;"
>
<el-input
type=
"password"
v-model
=
"loginForm.pass"
placeholder=
"请输入密码
"
<el-form-item
prop=
"pass"
style=
"margin-bottom: 10px !important;"
>
<el-input
type=
"password"
v-model
.
trim=
"loginForm.pass"
placeholder=
"请输入密码"
maxlength=
"18
"
autocomplete
></el-input>
</el-form-item>
<el-form-item
class=
"remumberPass"
>
<el-checkbox
name=
"type"
@
click=
"handleRemumber"
>
记住密码
</el-checkbox>
<el-checkbox
name=
"type"
@
click=
"handleRemumber"
v-model=
"checked"
>
记住密码
</el-checkbox>
<span
@
click=
"handleForget"
>
忘记密码?
</span>
</el-form-item>
<el-form-item>
...
...
@@ -28,10 +28,10 @@
<el-form
:model=
"yzCodeForm"
:rules=
"rules"
ref=
"yzCodeForm"
class=
"demo-loginForm"
>
<el-form-item
prop=
"mobile"
required
>
<el-input
v-model=
"yzCodeForm.mobile"
placeholder=
"请输入手机号"
autocomplete
></el-input>
<el-input
v-model
.
trim
=
"yzCodeForm.mobile"
placeholder=
"请输入手机号"
autocomplete
></el-input>
</el-form-item>
<el-form-item
prop=
"code"
class=
"yzcodeItem"
>
<el-input
type=
"text"
v-model=
"yzCodeForm.code"
placeholder=
"请输入验证码"
style=
"float: left;"
<el-input
type=
"text"
v-model
.
trim
=
"yzCodeForm.code"
placeholder=
"请输入验证码"
style=
"float: left;"
autocomplete
></el-input>
<span
class=
"getyzcodeBtn"
>
{{
codehtml
}}
</span>
<!--
<span
class=
"getdyzcodeBtn"
>
{{
codehtml
}}
</span>
-->
...
...
@@ -54,6 +54,7 @@
</
template
>
<
script
>
import
validate
from
'../../common/validate'
;
export
default
{
name
:
"mobileLoginCmpt"
,
data
()
{
...
...
@@ -61,6 +62,7 @@
activeName
:
"first"
,
codehtml
:
"获取验证码"
,
lang
:
window
.
localStorage
.
getItem
(
"lang"
)
==
"zh-CN"
?
1
:
2
,
checked
:
false
,
loginForm
:
{
mobile
:
""
,
pass
:
""
...
...
@@ -71,15 +73,14 @@
},
rules
:
{
mobile
:
[
{
required
:
true
,
message
:
'请输入手机号'
,
trigger
:
'blur'
},
{
max
:
11
,
message
:
'长度在 11 个字符'
,
trigger
:
'blur'
}
{
required
:
true
,
validator
:
validate
.
checkMobile
,
trigger
:
'blur'
},
],
pass
:[
{
required
:
true
,
message
:
'请输入密码'
,
trigger
:
'blur'
},
{
min
:
6
,
max
:
18
,
message
:
'长度在 6 到 18 个字符'
,
trigger
:
'blur'
}
{
required
:
true
,
validator
:
validate
.
checkPassWord
,
trigger
:
'blur'
},
{
min
:
6
,
max
:
18
,
message
:
'
密码
长度在 6 到 18 个字符'
,
trigger
:
'blur'
}
],
code
:
[{
required
:
true
,
message
:
'请输入验证码'
,
trigger
:
'blur'
},
{
m
ax
:
4
,
message
:
'长度在 4
个字符'
,
trigger
:
'blur'
}]
code
:
[{
required
:
true
,
validator
:
validate
.
checkCode
,
trigger
:
'blur'
},
{
m
in
:
4
,
max
:
6
,
message
:
'长度在 4 到 6
个字符'
,
trigger
:
'blur'
}]
},
}
},
...
...
@@ -97,8 +98,34 @@
},
//判断是否选中记住密码
isCheckedPassword
(){
const
self
=
this
;
//判断复选框是否被勾选 勾选则调用配置cookie方法
if
(
self
.
checked
==
true
)
{
//传入账号名,密码,和保存天数3个参数
self
.
setCookie
(
self
.
loginForm
.
mobile
,
self
.
loginForm
.
pass
,
7
);
}
else
{
console
.
log
(
"清空Cookie"
);
//清空Cookie
self
.
clearCookie
();
}
},
//登录
handleLogin
(
type
,
form
)
{
handleLogin
(
type
,
formName
)
{
const
that
=
this
;
this
.
$refs
[
formName
].
validate
((
valid
)
=>
{
if
(
valid
)
{
if
(
type
==
1
){
//1密码登录 2验证码登录
that
.
isCheckedPassword
();
}
else
{
}
}
else
{
return
false
;
}
});
},
...
...
@@ -116,10 +143,40 @@
//收不到验证码
handleRegetCode
(){
},
//设置cookie
setCookie
(
c_name
,
c_pwd
,
exdays
)
{
var
exdate
=
new
Date
();
//获取时间
exdate
.
setTime
(
exdate
.
getTime
()
+
24
*
60
*
60
*
1000
*
exdays
);
//保存的天数
//字符串拼接cookie
window
.
document
.
cookie
=
"userName"
+
"="
+
c_name
+
";path=/;expires="
+
exdate
.
toGMTString
();
window
.
document
.
cookie
=
"userPwd"
+
"="
+
c_pwd
+
";path=/;expires="
+
exdate
.
toGMTString
();
},
//读取cookie
getCookie
:
function
()
{
if
(
document
.
cookie
.
length
>
0
)
{
var
arr
=
document
.
cookie
.
split
(
'; '
);
//这里显示的格式需要切割一下自己可输出看下
for
(
var
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
var
arr2
=
arr
[
i
].
split
(
'='
);
//再次切割
//判断查找相对应的值
if
(
arr2
[
0
]
==
'userName'
)
{
this
.
loginForm
.
mobile
=
arr2
[
1
];
//保存到保存数据的地方
}
else
if
(
arr2
[
0
]
==
'userPwd'
)
{
this
.
loginForm
.
pass
=
arr2
[
1
];
}
}
}
},
mounted
()
{
//清除cookie
clearCookie
:
function
()
{
this
.
setCookie
(
""
,
""
,
-
1
);
//修改2值都为空,天数为负1天就好了
}
},
mounted
()
{
this
.
getCookie
();
}
}
</
script
>
...
...
src/main.js
View file @
2e3b07be
...
...
@@ -13,10 +13,14 @@ Vue.use(Element);
Vue
.
config
.
productionTip
=
false
;
router
.
beforeEach
((
to
,
from
,
next
)
=>
{
next
();
if
(
to
.
name
==
'login'
){
if
(
window
.
localStorage
.
getItem
(
"lang"
)
==
"zh-CN"
)
router
.
replace
(
'/mobileLoginCmpt'
);
if
(
to
.
name
==
'login'
||
to
.
name
==
"mobileLoginCmpt"
||
to
.
name
==
"emailLoginCmpt"
){
if
(
navigator
.
language
==
"zh-CN"
)
router
.
replace
(
'/mobileLoginCmpt'
);
else
router
.
replace
(
'/emailLoginCmpt'
)
}
if
(
to
.
name
==
"mobileRegisterCmpt"
||
to
.
name
==
"emailRegisterCmpt"
){
if
(
navigator
.
language
==
"zh-CN"
)
router
.
replace
(
'/mobileRegisterCmpt'
);
else
router
.
replace
(
'/emailRegisterCmpt'
)
}
// if(window.localStorage.getItem("loginToken") ==null){
// if(to.name == 'forgetPass' || to.name == 'updateForgetPass' || to.name == 'updateForgetPassSuccess'){
//
...
...
src/views/loginregister/pages/login.vue
View file @
2e3b07be
...
...
@@ -52,7 +52,7 @@
width
:
38%
;
padding-top
:
50px
;
padding-left
:
40px
;
background
:
url("../../../assets/img/login/login-bg@2x.
pn
g")
no-repeat
;
background
:
url("../../../assets/img/login/login-bg@2x.
jp
g")
no-repeat
;
background-size
:
100%
auto
;
text-align
:
left
;
.logoInfo
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment