<!doctype html>
<html>
<head>
<meta charset=
"utf-"
>
<title>js密码强度</title>
<style type=
"text/css"
>
.pw_letter{ margin-top:px; font-size: px; }
.pw_letter label{float: left; margin-right:px; cursor:
default
; font-size: px; line-height: px;;}
.pw_letter span{ float: left; display:inline-block; width:px; height:px; line-height:px; text-align:center; color:#FFF; background-color:#ccc; border-left: px solid #FFF;}
.pw_letter span.pw_strength_color{ background-color:green;}
</style>
</head>
<body>
<input id=
"password"
type=
"password"
name=
"password"
placeholder=
"密码"
onKeyUp=
"setPasswordStrength(this.value.trim())"
>
<div
class
=
"pw_letter"
><label>安全程度</label> <span
class
=
"strength"
>弱</span> <span
class
=
"strength"
>中</span> <span
class
=
"strength"
>强</span> </div>
<script type=
"text/javascript"
>
String.prototype.passwordStrength=
function
(){
if
(this.length> && this.length<=)
return
;
var
n = (this.search(/[a-zA-Z]/) != -) ? : ,
n = (this.search(/[-]/) != -) ? : ,
n =(this.search(/[\~\`\!\@\#\$\%\^\&\*\(\)\_\+\-\=\[\]|{\}\;\'\:\"\,\.\/\<\>\?]{,}/) != -) ? : ;
return
n+n+n;
}
String.prototype.trim = String.prototype.trim ||
function
(){
return
this.replace(/^\s+|\s+$/g,
""
);
}
function
setPasswordStrength(pwd){
var
strength_span = document.getElementsByClassName(
"strength"
);
for
(
var
i=; i<strength_span.length; i++){
strength_span.item(i).className=
"strength"
;
}
for
(
var
i=; i<pwd.passwordStrength(); i++){
document.getElementsByClassName(
"strength"
).item(i).className=
"strength pw_strength_color"
;
}
}
</script>
</body>