Display the password strength in javascript, and display the javascript password strength.
Password strength and Chinese strength
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Base href = "<% = basePath %>">
<Title> My JSP 'a. jsp 'starting page </title>
<Meta http-equiv = "pragma" content = "no-cache">
<Meta http-equiv = "cache-control" content = "no-cache">
<Meta http-equiv = "expires" content = "0">
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "This is my page">
<Style type = "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: 1px solid #42BF26; background-color: white; vertical-align: middle; font-size: 0 ;}
. Status-bar span {background-color: #42BF26; height: 5px; display: inline-block ;}
</Style>
</Head>
<Body>
<Input type = "password" id = "pwd1" style = "float: left; margin-top: 5px;" onkeyup = "checkPassword ();"/>
<Div id = "p_PasswordStatus" class = "J_PasswordStatus"
Style = "display: none; width: 300px;">
<Span class = "trigger"> password strength: </span>
<Span class = "status-bar" style = "text-indent: 0px;">
<Span style = "line-height: 5px;"> </span>
</Span>
<Span class = "status-result"> </span>
</Div>
</Body>
</Html>
<Script type = "text/javascript" src = "jquery-1.7.2.min.js"> </script>
<Script type = "text/javascript">
Function checkPassword (){
Var pwd = $ ("# pwd1"). val ();
GPasswdStatus (pwd, 'P _ passwordstatus ');
}
Function gPasswdStatus (value, id ){
Var status = $ ("#" + id );
Var result = $ ("#" + id). find (". status-result") [0];
Var bar = $ ("#" + id). find (". status-bar span ");
If (value = ""){
Status.css ("display", "none ");
} Else {
Var score = gCheckPassword (value );
Bar.css ("width", score + "% ");
Var resultDesp = gGetResultDesp (score );
Result. innerHTML = resultDesp;
Status.css ("display", "block ");
}
}
/**
* Check the password strength and return the score
*
* @ Param {}
* Password
* @ Return {Number}
*/
Function gCheckPassword (password ){
Var _ score = 0;
If (! Password ){
Return 0
}
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
}
/**
* Returns a Chinese prompt indicating the strength of the password Based on the password strength score
*
* @ Param {}
* Score
* @ Return {String}
*/
Function gGetResultDesp (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>
The above is all the content shared in this article. I hope it will be helpful for you to master javascript.