Toggle navigation
Toggle navigation
This project
Loading...
Sign in
fe
/
YOHOBUYPC
·
Commits
Go to a project
GitLab
Go to group
Project
Activity
Files
Commits
Pipelines
0
Builds
0
Graphs
Milestones
Issues
0
Merge Requests
2
Members
Labels
Wiki
Forks
Network
Create a new issue
Download as
Email Patches
Plain Diff
Browse Files
Authored by
lore-w
9 years ago
Commit
5349d4ad66263c4ae408e0b13cae4c2bc108b947
1 parent
7ebcaa32
完成注册模块
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
172 additions
and
132 deletions
template/www.yohobuy.com/actions/passport/register/index.phtml
web-static/img/passport/tip-saf0e57100e.png → web-static/img/passport/tip-saaf6d94c96.png
web-static/js/passport/pwd-strength.js
web-static/js/passport/reg.js
web-static/sass/passport/_index.scss
web-static/sass/passport/_register.scss
template/www.yohobuy.com/actions/passport/register/index.phtml
View file @
5349d4a
...
...
@@ -24,7 +24,7 @@
</li>
<li
class=
"clearfix"
data-index=
"2"
>
<input
id=
"msg-captcha"
class=
"input va msg-captcha"
type=
"text"
name=
"msgCaptcha"
placeholder=
"短信验证码"
autocomplete=
"off"
maxlength=
"4"
>
<input
id=
"send-captcha"
class=
"btn send-captcha disable"
type=
"button"
value=
"获取短信验证码"
disabled=
""
>
<input
id=
"send-captcha"
class=
"btn send-captcha disable"
type=
"button"
value=
"获取短信验证码"
>
<span
id=
"msg-tip"
class=
"hide msg-tip"
>短信验证码已发送至您的手机,请查收</span>
</li>
<li
class=
"clearfix"
data-index=
"3"
>
...
...
web-static/img/passport/tip-sa
f0e57100e
.png → web-static/img/passport/tip-sa
af6d94c96
.png
View file @
5349d4a
1.4 KB
web-static/js/passport/pwd-strength.js
View file @
5349d4a
/**
* @desc: 计算密码复杂度(from:http://www.oschina.net/code/snippet_127301_17269)
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/5/6
/*
* 计算密码复杂度
*/
function
computeComplex
(
password
)
{
var
complex
=
0
;
var
length
=
password
.
length
;
var
pre
=
''
;
var
preType
=
0
;
for
(
var
i
=
0
;
i
<
length
;
i
++
)
{
var
cur
=
password
.
charAt
(
i
);
var
curType
=
gettype
(
password
,
i
);
if
(
preType
!=
curType
||
!
isregular
(
cur
,
pre
,
curType
))
{
complex
+=
curType
+
getcomplex
(
curType
,
preType
);
}
pre
=
cur
;
preType
=
curType
;
}
return
complex
;
}
function
gettype
(
str
,
i
)
{
if
(
str
.
charCodeAt
(
i
)
>=
48
&&
str
.
charCodeAt
(
i
)
<=
57
)
{
return
1
;
}
else
if
(
str
.
charCodeAt
(
i
)
>=
97
&&
str
.
charCodeAt
(
i
)
<=
122
)
{
}
else
if
(
str
.
charCodeAt
(
i
)
>=
97
&&
str
.
charCodeAt
(
i
)
<=
122
)
{
return
2
;
}
else
if
(
str
.
charCodeAt
(
i
)
>=
65
&&
str
.
charCodeAt
(
i
)
<=
90
)
{
}
else
if
(
str
.
charCodeAt
(
i
)
>=
65
&&
str
.
charCodeAt
(
i
)
<=
90
)
{
return
3
;
}
...
...
@@ -42,25 +18,50 @@ function isregular(cur, pre, type) {
var
curCode
=
cur
.
charCodeAt
(
0
);
var
preCode
=
pre
.
charCodeAt
(
0
);
if
(
curCode
-
preCode
==
0
)
{
if
(
curCode
-
preCode
===
0
)
{
return
true
;
}
if
(
type
!=
4
&&
(
curCode
-
preCode
==
1
||
curCode
-
preCode
==
-
1
))
{
if
(
type
!==
4
&&
(
curCode
-
preCode
===
1
||
curCode
-
preCode
===
-
1
))
{
return
true
;
}
return
false
;
}
function
getcomplex
(
curType
,
preType
){
if
(
preType
==
0
||
curType
==
preType
){
function
getcomplex
(
curType
,
preType
)
{
if
(
preType
===
0
||
curType
===
preType
)
{
return
0
;
}
else
if
(
curType
==
4
||
preType
==
4
)
{
}
else
if
(
curType
===
4
||
preType
===
4
)
{
return
2
;
}
else
{
}
else
{
return
1
;
}
}
function
computeComplex
(
password
)
{
var
complex
=
0
,
length
=
password
.
length
,
pre
=
''
,
preType
=
0
,
i
=
0
,
cur
,
curType
;
for
(
i
=
0
;
i
<
length
;
i
++
)
{
cur
=
password
.
charAt
(
i
);
curType
=
gettype
(
password
,
i
);
if
(
preType
!==
curType
||
!
isregular
(
cur
,
pre
,
curType
))
{
complex
+=
curType
+
getcomplex
(
curType
,
preType
);
}
pre
=
cur
;
preType
=
curType
;
}
return
complex
;
}
module
.
exports
=
computeComplex
;
\ No newline at end of file
...
...
web-static/js/passport/reg.js
View file @
5349d4a
...
...
@@ -9,6 +9,7 @@ var $ = require('yoho.jquery'),
var
$registerPage
=
$
(
'.register-page'
),
$pwdTips
=
$
(
'#pwd-tips'
),
$pwdTip1
=
$pwdTips
.
find
(
'#pwd-tip1'
),
$errTip
=
$
(
'#err-tip'
),
$registerBtn
=
$
(
'#register-btn'
);
...
...
@@ -57,20 +58,17 @@ validateResult = [
{
id
:
'phone-num'
,
message
:
''
,
//错误信息
status
:
false
,
//当前的状态
isNeedAjaxValidate
:
false
//是否需要ajax校验,如果手机号正则校验通过则需要ajax校验该手机号是否注册过
status
:
false
//当前的状态
},
{
id
:
'captcha'
,
message
:
''
,
status
:
false
,
isNeedAjaxValidate
:
false
//图形验证码需要发ajax确认是否正确
status
:
false
},
{
id
:
'msg-captcha'
,
message
:
''
,
status
:
false
,
isNeedAjaxValidate
:
false
//是否需要ajax请求验证短信验证码的正确性
status
:
false
},
{
id
:
'pwd'
,
...
...
@@ -183,10 +181,6 @@ function validateRule($element, callback) {
callback
();
}
else
{
validateResult
[
0
].
message
=
''
;
validateResult
[
0
].
status
=
false
;
validateResult
[
0
].
isNeedAjaxValidate
=
true
;
phoneAjaxFn
(
callback
);
}
...
...
@@ -197,10 +191,22 @@ function validateRule($element, callback) {
validateResult
[
1
].
status
=
false
;
callback
();
}
else
if
(
val
.
length
<=
3
)
{
validateResult
[
1
].
message
=
'图形验证码为4位'
;
validateResult
[
1
].
status
=
false
;
callback
();
}
else
{
validateResult
[
1
].
message
=
''
;
validateResult
[
1
].
isNeedAjaxValidate
=
true
;
picCaptchaAjaxFn
(
callback
);
// 并且手机号正确
if
(
validateResult
[
0
].
status
)
{
picCaptchaAjaxFn
(
callback
);
}
else
{
validateResult
[
1
].
message
=
'图形验证码错误'
;
validateResult
[
1
].
status
=
false
;
callback
();
}
}
//短信验证码校验
...
...
@@ -211,11 +217,20 @@ function validateRule($element, callback) {
validateResult
[
2
].
status
=
false
;
callback
();
}
else
{
validateResult
[
2
].
message
=
''
;
}
else
if
(
val
.
length
<=
3
)
{
validateResult
[
2
].
message
=
'短信验证码为4位'
;
validateResult
[
2
].
status
=
false
;
validateResult
[
2
].
isNeedAjaxValidate
=
true
;
msgCaptchaAjaxFn
(
callback
);
callback
();
}
else
{
// 并且图形验证码正确
if
(
validateResult
[
1
].
status
)
{
msgCaptchaAjaxFn
(
callback
);
}
else
{
validateResult
[
2
].
message
=
'短信验证码错误'
;
validateResult
[
2
].
status
=
false
;
}
}
//密码校验
...
...
@@ -260,6 +275,7 @@ function validateRule($element, callback) {
//显示提示信息
function
showErrTip
()
{
var
show
=
false
,
tipPosition
,
$container
,
...
...
@@ -267,20 +283,26 @@ function showErrTip() {
validateResultLen
=
validateResult
.
length
;
for
(
i
=
0
;
i
<
validateResultLen
;
i
++
)
{
if
(
!
show
&&
!!
validateResult
[
i
].
message
)
{
if
(
!
show
)
{
//不可以通过status判断
if
(
!!
validateResult
[
i
].
message
)
{
//显示错误提示
$errTip
.
find
(
'span'
).
text
(
validateResult
[
i
].
message
);
//显示错误提示
$errTip
.
find
(
'span'
).
text
(
validateResult
[
i
].
message
);
$container
=
$
(
'#'
+
validateResult
[
i
].
id
);
$container
=
$
(
'#'
+
validateResult
[
i
].
id
);
tipPosition
=
$container
.
offset
();
$errTip
.
css
({
top
:
tipPosition
.
top
-
40
,
left
:
tipPosition
.
left
}).
removeClass
(
'hide'
);
tipPosition
=
$container
.
offset
();
$errTip
.
css
({
top
:
tipPosition
.
top
-
40
,
left
:
tipPosition
.
left
}).
removeClass
(
'hide'
);
show
=
true
;
//停止判断
show
=
true
;
//停止判断
}
else
{
$errTip
.
addClass
(
'hide'
);
}
}
}
}
...
...
@@ -308,18 +330,67 @@ function showBorder() {
}
}
// 密码强度验证
function
pwdFn
(
$obj
)
{
var
pwd
=
$obj
.
val
(),
pwdStrength
=
computeComplex
(
pwd
),
level
=
0
;
if
(
pwdStrength
===
0
)
{
level
=
0
;
}
else
if
(
pwdStrength
<=
10
)
{
level
=
1
;
}
else
if
(
pwdStrength
<=
20
)
{
level
=
2
;
}
else
{
level
=
3
;
}
switch
(
level
)
{
case
0
:
$pwdParent
.
removeClass
(
'red yellow green'
);
$pwdIntensity
.
removeClass
(
'color'
);
break
;
case
1
:
$pwdParent
.
addClass
(
'red'
).
removeClass
(
'yellow green'
);
$pwdIntensity
.
filter
(
'.low'
).
addClass
(
'color'
);
$pwdIntensity
.
filter
(
'.mid,.high'
).
removeClass
(
'color'
);
break
;
case
2
:
$pwdParent
.
addClass
(
'yellow'
).
removeClass
(
'red green'
);
$pwdIntensity
.
filter
(
'.low,.mid'
).
addClass
(
'color'
);
$pwdIntensity
.
filter
(
'.high'
).
removeClass
(
'color'
);
break
;
case
3
:
$pwdParent
.
addClass
(
'green'
).
removeClass
(
'yellow red'
);
$pwdIntensity
.
addClass
(
'color'
);
break
;
}
//提示框
if
(
pwd
===
''
)
{
$pwdTip1
.
removeClass
(
'red yes no'
).
addClass
(
'default'
);
}
else
if
(
pwd
.
length
<
6
||
pwd
.
length
>
20
)
{
$pwdTip1
.
removeClass
(
'default yes'
).
addClass
(
'no red'
);
}
else
{
$pwdTip1
.
removeClass
(
'default no red'
).
addClass
(
'yes'
);
}
}
// 失去焦点时开始校验
// Tips: 不可以在获得焦点的时候验证,获得焦点和失去焦点的间隔太小,如果中间存在ajax校验的话会出现问题
$registerPage
.
find
(
'.va'
).
keyup
(
function
()
{
var
j
,
statusLen
=
0
,
vLen
=
validateResult
.
length
;
vLen
=
validateResult
.
length
,
$that
=
$
(
this
);
validateRule
(
$
(
this
),
function
()
{
showErrTip
();
showErrTip
();
// 显示错误提示
showBorder
();
// 显示红色边框
// 如果validateResult中有4个status为true表示验证通过
for
(
j
=
0
;
j
<
vLen
;
j
++
)
{
if
(
validateResult
[
j
].
status
)
{
...
...
@@ -335,14 +406,28 @@ $registerPage.find('.va').keyup(function() {
$registerBtn
.
addClass
(
'disable'
);
}
// 图形验证通过时,发送短信按钮可点击
if
(
validateResult
[
1
].
status
)
{
$sendCaptcha
.
removeClass
(
'disable'
);
}
else
{
$sendCaptcha
.
addClass
(
'disable'
);
}
//图形验证通过时,发送短信按钮可点击 end
});
// 如果是密码则校验强度
if
((
$that
).
hasClass
(
'pwd'
))
{
pwdFn
(
$that
);
}
}).
blur
(
function
()
{
validateRule
(
$
(
this
),
function
()
{
/*
validateRule($(this), function() {
showErrTip();
showBorder(); // 显示红色边框
});
});
*/
});
$regionSelect
.
change
(
function
()
{
...
...
@@ -352,68 +437,23 @@ $regionSelect.change(function() {
validateRule
(
$pn
,
showErrTip
);
//验证
});
// 图形验证keyup
$ca
.
keyup
(
function
()
{
// 验证码输入4位并且手机号验证通过发ajax请求
if
(
$
(
this
).
val
().
length
===
4
&&
validateResult
[
0
].
status
)
{
picCaptchaAjaxFn
(
function
()
{
if
(
validateResult
[
1
].
status
)
{
$sendCaptcha
.
removeClass
(
'disable'
);
}
});
// 点击发送验证码
$sendCaptcha
.
click
(
function
()
{
var
timeResidue
=
10
,
t
;
}
else
{
$sendCaptcha
.
addClass
(
'disable'
);
if
(
$
(
this
).
hasClass
(
'disable'
))
{
return
;
}
});
$pwd
.
keyup
(
function
()
{
var
pwd
=
$
(
this
).
val
(),
pwdStrength
=
computeComplex
(
pwd
),
level
=
0
;
if
(
pwdStrength
===
0
)
{
level
=
0
;
}
else
if
(
pwdStrength
<=
10
)
{
level
=
1
;
}
else
if
(
pwdStrength
<=
20
)
{
level
=
2
;
}
else
{
level
=
3
;
}
switch
(
level
)
{
case
0
:
$pwdParent
.
removeClass
(
'red yellow green'
);
$pwdIntensity
.
removeClass
(
'color'
);
break
;
case
1
:
$pwdParent
.
addClass
(
'red'
).
removeClass
(
'yellow green'
);
$pwdIntensity
.
filter
(
'.low'
).
addClass
(
'color'
);
$pwdIntensity
.
filter
(
'.mid,.high'
).
removeClass
(
'color'
);
break
;
case
2
:
$pwdParent
.
addClass
(
'yellow'
).
removeClass
(
'red green'
);
$pwdIntensity
.
filter
(
'.low,.mid'
).
addClass
(
'color'
);
$pwdIntensity
.
filter
(
'.high'
).
removeClass
(
'color'
);
break
;
case
3
:
$pwdParent
.
addClass
(
'green'
).
removeClass
(
'yellow red'
);
$pwdIntensity
.
addClass
(
'color'
);
break
;
}
//提示框
/*if (pwd === '') {
} else {
if (pwd.length < 6 || pwd.length > 20) {
} else {
//todo ajax
t
=
setInterval
(
function
()
{
if
(
timeResidue
<=
0
)
{
$sendCaptcha
.
removeClass
(
'disable'
).
val
(
'获取短信验证码'
);
clearInterval
(
t
);
return
;
}
}*/
$sendCaptcha
.
addClass
(
'disable'
).
val
(
timeResidue
--
+
'秒可重新发送'
);
},
1000
);
});
\ No newline at end of file
...
...
web-static/sass/passport/_index.scss
View file @
5349d4a
@import
"login"
,
"register"
,
"back"
;
$tip
:
sprite-map
(
"passport/tip/*.png"
,
$spacing
:
10px
);
@import
"login"
,
"register"
,
"back"
;
/**/
.passport-page
{
width
:
1150px
;
...
...
web-static/sass/passport/_register.scss
View file @
5349d4a
...
...
@@ -214,14 +214,13 @@
b
{
display
:
block
;
width
:
0
;
height
:
0
;
border-left
:
8px
solid
transparent
;
border-right
:
8px
solid
transparent
;
border-top
:
8px
solid
#ffebeb
;
position
:
absolute
;
top
:
30px
;
left
:
20px
;
background
:
sprite
(
$tip
,
angle
)
no-repeat
;
width
:
image-width
(
sprite-file
(
$tip
,
angle
));
height
:
image-height
(
sprite-file
(
$tip
,
angle
));
}
}
}
...
...
Please
register
or
login
to post a comment