javascript实现密码强度显示
密码强度显示和中文强弱显示
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>MyJSP'a.jsp'startingpage</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<styletype="text/css">
*{margin:0px;padding:0px;}
.J_PasswordStatus{padding-bottom:0px;height:18px;}
.status-bar{margin:0px;display:inline-block;width:80px;height:5px;padding:1px;border:1pxsolid#42BF26;background-color:white;vertical-align:middle;font-size:0;}
.status-barspan{background-color:#42BF26;height:5px;display:inline-block;}
</style>
</head>
<body>
<inputtype="password" id="pwd1"style="float:left;margin-top:5px;"onkeyup="checkPassword();"/>
<divid="p_PasswordStatus"class="J_PasswordStatus"
style="display:none;width:300px;">
<spanclass="trigger">密码强度：</span>
<spanclass="status-bar"style="text-indent:0px;">
<spanstyle="line-height:5px;"> </span>
</span>
<spanclass="status-result"></span>
</div>
</body>
</html>
<scripttype="text/javascript"src="jquery-1.7.2.min.js"></script>
<scripttype="text/javascript">
functioncheckPassword(){
varpwd=$("#pwd1").val();
gPasswdStatus(pwd,'p_PasswordStatus');
}
functiongPasswdStatus(value,id){
varstatus=$("#"+id);
varresult=$("#"+id).find(".status-result")[0];
varbar=$("#"+id).find(".status-barspan");
if(value===""){
status.css("display","none");
}else{
varscore=gCheckPassword(value);
bar.css("width",score+"%");
varresultDesp=gGetResultDesp(score);
result.innerHTML=resultDesp;
status.css("display","block");
}
}
/**
*检验密码强度并返回得分
*
*@param{}
* password
*@return{Number}
*/
functiongCheckPassword(password){
var_score=0;
if(!password){
return0
}
if(password.length<=4){
_score+=5
}else{
if(password.length>=5&&password.length<=7){
_score+=10
}else{
if(password.length>=8){
_score+=25
}
}
}
var_UpperCount=(password.match(/[A-Z]/g)||[]).length;
var_LowerCount=(password.match(/[a-z]/g)||[]).length;
var_LowerUpperCount=_UpperCount+_LowerCount;
if(_UpperCount&&_LowerCount){
_score+=20
}else{
if(_UpperCount||_LowerCount){
_score+=10
}
}
var_NumberCount=(password.match(/[\d]/g,"")||[]).length;
if(_NumberCount>0&&_NumberCount<=2){
_score+=10
}else{
if(_NumberCount>=3){
_score+=20
}
}
var_CharacterCount=(password.match(/[!@#$%^&*?_\.\-~]/g)||[]).length;
if(_CharacterCount==1){
_score+=10
}else{
if(_CharacterCount>1){
_score+=25
}
}
if(_NumberCount&&(_UpperCount&&_LowerCount)
&&_CharacterCount){
_score+=5
}else{
if(_NumberCount&&_LowerUpperCount&&_CharacterCount){
_score+=3
}else{
if(_NumberCount&&_LowerUpperCount){
_score+=2
}
}
}
return_score
}
/**
*根据密码强度得分返回密码强弱度中文提示
*
*@param{}
* score
*@return{String}
*/
functiongGetResultDesp(score){
if(score<=5){
return"\u592a\u77ed"
}else{
if(score>5&&score<20){
return"\u5f31"
}else{
if(score>=20&&score<60){
return"\u4e2d"
}else{
if(score>=60){
return"\u5f3a"
}else{
return""
}
}
}
}
}
</script>
以上所述就是本文给大家分享的全部内容了，希望对大家熟练掌握javascript能够有所帮助。