您的位置：首页 > Web前端 > JQuery

JS密码强度验证(兼容IE,火狐,谷歌) -- 仿JQuery中文社区注册

2010-03-31 15:48 786 查看
仿做网站:http://bbs.jquery.org.cn/register.php

源码:

//=================HTML页面=================

01
<
body
onload
=
"InitCss();"
>
02
<
form
>
03
<
div
>
04
<
table
>
05
<
tr
>
06
<
td
>
07
密码:
08
</
td
>
09
<
td
>
10
<
input
id
=
"txtPassword"
type
=
"password"
style
=
"width:130px;"
maxlength
=
"16"
onfocus
=
"InitCss();"
11
onblur
=
"ValidateInput('password',this.value)"
onkeydown
=
"validatePwdStrong(this.value);"
/>
12
</
td
>
13
<
td
>
14
<
div
id
=
"tipPosition"
>
15
</
div
>
16
</
td
>
17
</
tr
>
18
<
tr
>
19
<
td
>
20
</
td
>
21
<
td
>
22
<
table
id
=
"pwdStrong_color"
>
23
<
tr
>
24
<
td
id
=
"pwdStrong_1"
>
25
</
td
>
26
<
td
id
=
"pwdStrong_2"
>
27
</
td
>
28
<
td
id
=
"pwdStrong_3"
>
29
</
td
>
30
<
td
id
=
"pwdStrong_4"
>
31
</
td
>
32
</
tr
>
33
</
table
>
34
</
td
>
35
<
td
>
36
<
div
id
=
"pwdStrong_text"
>
37
</
div
>
38
</
td
>
39
</
tr
>
40
</
table
>
41
</
div
>
42
</
form
>
43
</
body
>
//=================JS文件=================

01
//使用$替换document.getElementById函数
02
var
$=
function
(v){
return
document.getElementById(v);}
03
04
/******************************************************验证用户输入******************************************************/
05
function
ValidateInput(element,value){
06
//验证密码
07
if
(element==
"password"
){
08
if
(value.toString().length<6){
09
$(
'tipPosition'
).className=
'error'
;
10
$(
'tipPosition'
).innerHTML=
"密码设置错误。密码长度过小。"
;
11
return
;
12
}
13
else
{
14
$(
'tipPosition'
).className=
'success'
;
15
$(
'tipPosition'
).innerHTML=
"填写正确。"
;
16
}
17
}
18
}
19
/*================================密码验证JS===========Begin=======================================*/
20
//密码初始化的样式
21
function
InitCss(){
22
$(
'tipPosition'
).className=
'tip'
;
23
$(
'tipPosition'
).innerHTML=
"最小长度:6。最大长度:16。"
;
24
}
25
26
/*================================密码强度===========Begin=======================================*/
27
28
function
Evaluate(word){
29
return
word.replace(/^(?:([a-z])|([A-Z])|([0-9])|(.)){5,}|(.)+$/g,
"$1$2$3$4$5"
).length;
30
}
31
32
function
validatePwdStrong(value){
33
var
pwd={
34
color:[
'#E6EAED'
,
'#AC0035'
,
'#FFCC33'
,
'#639BCC'
,
'#246626'
],
35
text:[
'太短'
,
'弱'
,
'一般'
,
'很好'
,
'极佳'
]
36
};
37
function
colorInit(){
38
$(
'pwdStrong_1'
).style.backgroundColor=pwd.color[0];
39
$(
'pwdStrong_2'
).style.backgroundColor=pwd.color[0];
40
$(
'pwdStrong_3'
).style.backgroundColor=pwd.color[0];
41
$(
'pwdStrong_4'
).style.backgroundColor=pwd.color[0];
42
}
43
if
(Evaluate(value)==1){
44
colorInit();
45
$(
'pwdStrong_1'
).style.backgroundColor=pwd.color[1];
46
$(
'pwdStrong_text'
).innerHTML=pwd.text[1];
47
$(
'pwdStrong_text'
).style.color=pwd.color[1];
48
}
49
else
if
(Evaluate(value)==2){
50
colorInit();
51
$(
'pwdStrong_1'
).style.backgroundColor=pwd.color[2];
52
$(
'pwdStrong_2'
).style.backgroundColor=pwd.color[2];
53
$(
'pwdStrong_text'
).innerHTML=pwd.text[2];
54
$(
'pwdStrong_text'
).style.color=pwd.color[2];
55
}
56
else
if
(Evaluate(value)==3){
57
colorInit();
58
$(
'pwdStrong_1'
).style.backgroundColor=pwd.color[3];
59
$(
'pwdStrong_2'
).style.backgroundColor=pwd.color[3];
60
$(
'pwdStrong_3'
).style.backgroundColor=pwd.color[3];
61
$(
'pwdStrong_text'
).innerHTML=pwd.text[3];
62
$(
'pwdStrong_text'
).style.color=pwd.color[3];
63
}
64
else
if
(Evaluate(value)==4){
65
$(
'pwdStrong_1'
).style.backgroundColor=pwd.color[4];
66
$(
'pwdStrong_2'
).style.backgroundColor=pwd.color[4];
67
$(
'pwdStrong_3'
).style.backgroundColor=pwd.color[4];
68
$(
'pwdStrong_4'
).style.backgroundColor=pwd.color[4];
69
$(
'pwdStrong_text'
).innerHTML=pwd.text[4];
70
$(
'pwdStrong_text'
).style.color=pwd.color[4];
71
}
72
}
//=================CSS文件=================

01
body
02
{
03
font
:
13px
宋体;
04
}
05
/*密码验证提示CSS--------------------------------开始--------------------------------*/
06
#tipPosition
07
{
08
width
:
400px
;
09
height
:
16px
;
10
line-height
:
18px
;
11
padding
:
2px
30px
;
12
}
13
.tip
14
{
15
background
:
#E6F2FF
url
(images/register_tip.png)
no-repeat
10px
center
;
16
border
:
1px
#0E5863
dashed
;
17
color
:
#0E5863
;
18
}
19
.error
20
{
21
background
:
#FBECDF
url
(images/register_error.png)
no-repeat
10px
center
;
22
border
:
1px
Red
dashed
;
23
color
:
#6D3737
;
24
}
25
.success
26
{
27
background
:
#D6FCD2
url
(images/register_success.png)
no-repeat
10px
center
;
28
border
:
1px
#2F5D36
dashed
;
29
color
:
#3D934A
;
30
}
31
/*密码强度CSS--------------------------------开始--------------------------------*/
32
#pwdStrong_color
33
{
34
width
:
136px
;
35
height
:
3px
;
36
border
:
0px
;
37
border-collapse
:
collapse
;
38
border-spacing
:
0
;
39
background
:
#E6EAED
;
40
margin-top
:
5px
;
41
}
42
#pwdStrong_colortd
43
{
44
padding
:
0px
;
45
width
:
44px
;
/*如不加td宽度,Google的Chrome不会正常显示*/
46
}
47
#pwdStrong_text
48
{
49
font
:
12px
宋体;
50
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航