JQuery-based password Strength Verification Code _ jquery

There are many ways to verify the password strength. Today we recommend a password strength verification control implemented by JQuery, which can be achieved with only a small amount of code.

Because it is a JQuery-based control, of course, the JQuery library is required, and a JS of this control is required. JQuery JS you can download to the official website: http://code.jquery.com/jquery-1.4.2.min.js
The JS file of this control: password_strength_plugin.js
Password_strength_plugin.js

The Code is as follows:

(Function ($ ){
$. Fn. shortPass = 'too short ';
$. Fn. badPass = 'weak ';
$. Fn. goodPass = 'good ';
$. Fn. strongPass = 'strong ';
$. Fn. samePassword = 'username and Password identical .';
$. Fn. resultStyle = "";
$. Fn. passStrength = function (options ){
Var defaults = {
Required pass: "required pass", // optional
BadPass: "badPass", // optional
GoodPass: "goodPass", // optional
StrongPass: "strongPass", // optional
BaseStyle: "testresult", // optional
Userid: "", // required override
Messageloc: 1 // before = 0 or after = 1
};
Var opts = $. extend (defaults, options );
Return this. each (function (){
Var obj = $ (this );
$ (Obj). unbind (). keyup (function ()
{
Var results = $. fn. teststrength ($ (this). val (), $ (opts. userid). val (), opts );
If (opts. messageloc = 1)
{
$ (This). next ("." + opts. baseStyle). remove ();
$ (This). after ("");
$ (This). next ("." + opts. baseStyle). addClass ($ (this). resultStyle). find ("span"). text (results );
}
Else
{
$ (This). prev ("." + opts. baseStyle). remove ();
$ (This). before ("");
$ (This). prev ("." + opts. baseStyle). addClass ($ (this). resultStyle). find ("span"). text (results );
}
});
// FUNCTIONS
$. Fn. teststrength = function (password, username, option ){
Var score = 0;
// Password <4
If (password. length <4) {this. resultStyle = option. Allow pass; return $ (this). Allow pass ;}
// Password = user name
If (password. toLowerCase () = username. toLowerCase () {this. resultStyle = option. badPass; return $ (this). samePassword ;}
// Password length
Score + = password. length * 4;
Score + = ($. fn. checkRepetition (1, password). length-password. length) * 1;
Score + = ($. fn. checkRepetition (2, password). length-password. length) * 1;
Score + = ($. fn. checkRepetition (3, password). length-password. length) * 1;
Score + = ($. fn. checkRepetition (4, password). length-password. length) * 1;
// Password has 3 numbers
If (password. match (/(. * [0-9]. * [0-9]. * [0-9])/) {score + = 5 ;}
// Password has 2 symbols
If (password. match (/(.*[!, @, #, $, %, ^ ,&,*,?, _, ~]. *[!, @, #, $, %, ^ ,&,*,?, _, ~]) /) {Score + = 5 ;}
// Password has Upper and Lower chars
If (password. match (/([a-z]. * [A-Z]) | ([A-Z]. * [a-z])/) {score + = 10 ;}
// Password has number and chars
If (password. match (/([a-zA-Z])/) & password. match (/([0-9])/) {score + = 15 ;}
//
// Password has number and symbol
If (password. match (/([!, @, #, $, %, ^ ,&,*,?, _, ~]) /) & Password. match (/([0-9])/) {score + = 15 ;}
// Password has char and symbol
If (password. match (/([!, @, #, $, %, ^ ,&,*,?, _, ~]) /) & Password. match (/([a-zA-Z])/) {score + = 15 ;}
// Password is just a numbers or chars
If (password. match (/^ \ w + $/) | password. match (/^ \ d + $/) {score-= 10 ;}
// Verifying 0 <score <100
If (score <0) {score = 0 ;}
If (score> 100) {score = 100 ;}
If (score <34) {this. resultStyle = option. badPass; return $ (this). badPass ;}
If (score <68) {this. resultStyle = option. goodPass; return $ (this). goodPass ;}
This. resultStyle = option. strongPass;
Return $ (this). strongPass;
};
});
};
}) (JQuery );
$. Fn. checkRepetition = function (pLen, str ){
Var res = "";
For (var I = 0; I {
Var repeated = true;
For (var j = 0; j <pLen & (j + I + pLen) <str. length; j ++ ){
Repeated = repeated & (str. charAt (j + I) = str. charAt (j + I + pLen ));
}
If (j If (repeated ){
I + = pLen-1;
Repeated = false;
}
Else {
Res + = str. charAt (I );
}
}
Return res;
};

Css file of this control:
Style.css

The Code is as follows:

Td label {
Font-size: 14px;
Font-weight: bold;
Color: #666;
Font-family: arail, helvetica, san-serif;
}
Input {
Height: 28px;
Width: 200px;
Border: 1px solid # ccc;
Font-size: 16px;
Font-weight: bold;
Color: #666;
Padding: 7px 0 0 4px;
}
/* Advanced styles */
. Top_testresult {
Font-weight: bold;
Font-size: 13px;
Font-family: arail, helvetica, san-serif;
Color: #666;
Padding: 0;
Margin: 0 0 2px 0;
}
. Top_testresult span {
Padding: 6px;
Margin: 0;
}
. Top_shortPass {
Background: # edabab;
Border: 1px solid # bc0000;
Display: block;
}
. Top_shortPass span {
}
. Top_badPass {
Background: # edabab;
Border: 1px solid # bc0000;
Display: block;
}
. Top_badPass span {
}
. Top_goodPass {
Background: # ede3ab;
Border: 1px solid # bc9f00;
Display: block;
}
. Top_goodPass span {
}
. Top_strongPass {
Background: # d3edab;
Border: 1px solid #73bc00;
Display: block;
}
. Top_strongPass span {
}
/* Result style */
. Testresult {
Font-weight: bold;
Font-size: 13px;
Font-family: arial, helvetica, san-serif;
Color: #666;
Padding: 0px 0px 12px 10px;
Margin-left: 10px;
Display: block;
Height: 28px;
Float: left;
}
. Testresult span {
Padding: 10px 20px 12px 10px;
Margin: 0px 0px 0px 20px;
Display: block;
Float: right;
White-space: nowrap;
}
. Transfer pass {
Background: url (../images/red.png) no-repeat 0 0;
}
. Repeated pass span {
Background: url (../images/red.png) no-repeat top right;
}
. BadPass {
Background: url (../images/red.png) no-repeat 0 0;
}
. BadPass span {
Background: url (../images/red.png) no-repeat top right;
}
. GoodPass {
Background: url (../images/yellow.png) no-repeat 0 0;
}
. GoodPass span {
Background: url (../images/yellow.png) no-repeat top right;
}
. StrongPass {
Background: url (../images/green.png) no-repeat 0 0;
}
. StrongPass span {
Background: url (../images/green.png) no-repeat top right;
}

Head code
Head

The Code is as follows:

No title page