Because it is a jquery based control, of course, you need the jquery library, but also a JS of this control. jquery js Everyone can go to the official website download: http://code.jquery.com/jquery-1.4.2.min.js
JS file for this control: password_strength_plugin.js
Password_strength_plugin.js
Copy Code code 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 = {
Shortpass: "Shortpass",//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 ("<span class=\" "+opts.basestyle+" \ "><span></span></span>");
$ (this). Next ("." + Opts.basestyle). AddClass ($ (a). Resultstyle). Find ("span"). Text (results);
}
Else
{
$ (this). Prev ("." + Opts.basestyle). Remove ();
$ (this). Before ("<span class=\" "+opts.basestyle+" \ "><span></span></span>");
$ (this). Prev ("." + Opts.basestyle). AddClass ($ (a). Resultstyle). Find ("span"). Text (results);
}
});
Functions
$.fn.teststrength = function (password,username,option) {
var score = 0;
Password < 4
if (Password.length < 4) {This.resultstyle = Option.shortpass;return $ (this). Shortpass;}
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 > MB) {score = 100;}
if (Score <) {This.resultstyle = Option.badpass; return $ (this). Badpass;}
if (Score <) {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<str.length; 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<plen) {repeated=false;}
if (repeated) {
i+=plen-1;
Repeated=false;
}
else {
Res+=str.charat (i);
}
}
return res;
};
The CSS file for this control:
Style.css
Copy Code code 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;
}
. shortpass{
Background:url (.. /images/red.png) no-repeat 0 0;
}
. Shortpass 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 section Code
Head
Copy Code code as follows:
<title> Untitled Page </title>
<script type= "Text/javascript" src= "Js/jquery-1.4.2.min.js" ></script>
<!--custom Select plugin js-->
<script type= "Text/javascript" src= "Js/password_strength_plugin.js" ></script>
<link rel= "stylesheet" type= "Text/css" href= "Css/style.css" >
<script>
$ (document). Ready (function () {
BASIC
$ (". Password_test"). Passstrength ({
UserID: "#user_id"
});
ADVANCED
$ (". Password_adv"). Passstrength ({
Shortpass: "Top_shortpass",
Badpass: "Top_badpass",
Goodpass: "Top_goodpass",
Strongpass: "Top_strongpass",
BaseStyle: "Top_testresult",
UserID: "#user_id_adv",
messageloc:0
});
});
</script>
Body Part Code
Body
Copy Code code as follows:
<body>
<table cellpadding= "2" cellspacing= "0" border= "0" >
<tr>
<TD align= "right" ><label>user name:</label></td>
<td><input type= "text" name= "user_name" id= "User_id_adv"/></td>
</tr>
<tr>
<TD align= "right" ><label>Password:</label></td>
<td><input type= "Password" name= "Pass_word" class= "Password_adv"/></td>
</tr>
</table>
</body>