zoukankan
html css js c++ java
密码强度提示
<
html
>
<
head
>
<
style
>
body
{
}
{
/**/
/*
ie needs this
*/
margin
:
0px
;
padding
:
0px
;
/**/
/*
set global font settings
*/
font-size
:
10px
;
font-family
:
Tahoma,Verdana,Arial
;
}
a:hover
{
}
{
color
:
#fff
;
}
#user_registration
{
}
{
border
:
1px solid #cccccc
;
margin
:
auto auto
;
margin-top
:
100px
;
width
:
400px
;
}
#user_registration label
{
}
{
display
:
block
;
/**/
/*
block float the labels to left column, set a width
*/
float
:
left
;
width
:
70px
;
margin
:
0px 10px 0px 5px
;
text-align
:
right
;
line-height
:
1em
;
font-weight
:
bold
;
}
#user_registration input
{
}
{
width
:
250px
;
}
#user_registration p
{
}
{
clear
:
both
;
}
#submit
{
}
{
border
:
1px solid #cccccc
;
width
:
100px !important
;
margin
:
10px
;
}
h1
{
}
{
text-align
:
center
;
}
#passwordStrength
{
}
{
height
:
10px
;
display
:
block
;
float
:
left
;
}
.strength0
{
}
{
width
:
250px
;
background
:
#cccccc
;
}
.strength1
{
}
{
width
:
50px
;
background
:
#ff0000
;
}
.strength2
{
}
{
width
:
100px
;
background
:
#ff5f5f
;
}
.strength3
{
}
{
width
:
150px
;
background
:
#56e500
;
}
.strength4
{
}
{
background
:
#4dcd00
;
width
:
200px
;
}
.strength5
{
}
{
background
:
#399800
;
width
:
250px
;
}
</
style
>
</
style
>
<
script
>
function
passwordStrength(password)
{
var
desc
=
new
Array();
desc[
0
]
=
"
Very Weak
"
;
desc[
1
]
=
"
Weak
"
;
desc[
2
]
=
"
Better
"
;
desc[
3
]
=
"
Medium
"
;
desc[
4
]
=
"
Strong
"
;
desc[
5
]
=
"
Strongest
"
;
var
score
=
0
;
//
if password bigger than 6 give 1 point
if
(password.length
>
6
) score
++
;
//
if password has both lower and uppercase characters give 1 point
if
( ( password.match(
/
[a-z]
/
) )
&&
( password.match(
/
[A-Z]
/
) ) ) score
++
;
//
if password has at least one number give 1 point
if
(password.match(
/
\d+
/
)) score
++
;
//
if password has at least one special caracther give 1 point
if
( password.match(
/
.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]
/
) ) score
++
;
//
if password bigger than 12 give another 1 point
if
(password.length
>
12
) score
++
;
document.getElementById(
"
passwordDescription
"
).innerHTML
=
desc[score];
document.getElementById(
"
passwordStrength
"
).className
=
"
strength
"
+
score;
}
</
script
>
</
head
>
<
body
>
<
form
method
="post"
action
=""
id
="user_registration"
name
="user_registration"
>
<
p
><
h1
>
Password strength metter
</
h1
></
p
>
<
p
>
<
label
for
="pass"
>
Password
</
label
><
input
type
="password"
name
="pass"
id
="pass"
onkeyup
="passwordStrength(this.value)"
/>
</
p
>
<
p
>
<
label
for
="pass2"
>
Confirm Password
</
label
><
input
type
="password"
name
="pass2"
id
="pass2"
/>
</
p
>
<
p
>
<
label
for
="passwordStrength"
>
Password strength
</
label
>
<
div
id
="passwordDescription"
>
Password not entered
</
div
>
<
div
id
="passwordStrength"
class
="strength0"
></
div
>
</
p
>
<
p
>
<
input
type
="submit"
name
="submit"
id
="submit"
value
="Register"
>
</
p
>
</
form
>
</
body
>
</
html
>
查看全文
相关阅读:
团队项目第二阶段冲刺站立会议07
Alpha阶段项目总结
团队项目第二阶段冲刺站立会议06
团队项目第二阶段冲刺站立会议05
团队项目第二阶段冲刺站立会议04
团队项目第二阶段冲刺站立会议03
团队项目第二阶段冲刺站立会议02
团队项目第二阶段冲刺站立会议01
软件测试
针对各小组提出的意见作答
原文地址:https://www.cnblogs.com/craig/p/1205845.html
最新文章
一些实用的js高级技巧
angularjs的一些优化小技巧
如何提高jQuery的性能
WEB前端优化一些经验技巧
js事件监听机制(事件捕获)总结
CSS清除浮动大全共8种方法
使用Javascript获得网页中通过GET方法提交的参数
编写SASS的一些技巧
网页版面设计步骤和布局技巧
HTML兼容总结
热门文章
八仙过海各显神通,使用各种不同的技术来玩一玩
借助Q.js学习javascript异步编程。
亲手用模块化方式写一个jquery QQ表情插件。
不学就吃亏的underscorejs类库学习示例 ——(集合篇)
underscorejs-partition学习
underscorejs-size学习
underscorejs-sample学习
underscorejs-toArray学习
underscorejs-shuffle学习
underscorejs-countBy学习
Copyright © 2011-2022 走看看