Home > Developer > JavaScript

Evaluate the user's password input strength using Javascript (Knockout Version)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Let's take a look at how to use Knockout to verify the password strength more easily.
For the original code, see: Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
<Script type = "text/javascript">
// CharMode Function
Function CharMode (iN ){
If (iN> = 48 & iN <= 57) // number
Return1;
If (iN> = 65 & iN <= 90) // uppercase letter
Return2;
If (iN> = 97 & iN <= 122) // lower case
Return4;
Else
Return8; // special characters
}
// BitTotal Function
Function bitTotal (num ){
Modes = 0;
For (I = 0; I <4; I ++ ){
If (num & 1) modes ++;
Num >>>= 1;
}
Return modes;
}
// CheckStrong Function
Function checkStrong (sPW ){
If (sPW. length <= 4)
Return0; // The password is too short
Modes = 0;
For (I = 0; I <sPW. length; I ++ ){
Modes | = CharMode (sPW. charCodeAt (I ));
}
Return bitTotal (Modes );
}
// PwStrength Function
Function pwStrength (pwd ){
O_color = "# eeeeee ";
Rochelle color = "# FF0000 ";
M_color = "# FF9900 ";
H_color = "#33CC00 ";
If (pwd = null | pwd = ''){
Lcolor = Mcolor = Hcolor = O_color;
} Else {
S_level = checkStrong (pwd );
Switch (S_level ){
Case0:
Lcolor = Mcolor = Hcolor = O_color;
Case1:
Lcolor = L_color;
Mcolor = Hcolor = O_color;
Break;
Case2:
Lcolor = Mcolor = M_color;
Hcolor = O_color;
Break;
Default:
Lcolor = Mcolor = Hcolor = H_color;
}
Document. getElementById ("strength_L"). style. background = Lcolor;
Document. getElementById ("strength_M"). style. background = Mcolor;
Document. getElementById ("strength_H"). style. background = Hcolor;
Return;
}
} </Script>
<Form name = "form1" action = "">
Enter the password: <input type = "password" size = "10" onkeyup = "pwStrength (this. value)" onblur = "pwStrength (this. value)">
<Br>
Password strength:
<Table width = "217" border = "1" cellspacing = "0" cellpadding = "1" bordercolor = "# cccccc"
Height = "23" style = 'display: inline'>
<Tr align = "center" bgcolor = "# eeeeee">
& Lt; td width = "33%" id = "strength_L" & gt;
Weak
</Td>
& Lt; td width = "33%" id = "strength_M" & gt;
Medium
</Td>
& Lt; td width = "33%" id = "strength_H" & gt;
Strong
</Td>
</Tr>
</Table>
</Form>
</Body>
</Html>

First, we can improve the above Boyou verification function as the following code:Copy codeCode: var Page = Page || {};
Page. Utility = Page. Utility || {};
Page. Utility. Registration = Page. Utility. Registration || {};
// Obtain the password strength
Page. Utility. Registration. getPasswordLevel = function (password ){
If (password = null | password = '')
Return 0;
If (password. length <= 4)
Return 0; // The password is too short
Var Modes = 0;
For (I = 0; I <password. length; I ++ ){
Modes | = CharMode (password. charCodeAt (I ));
}
Return bitTotal (Modes );
// CharMode Function
Function CharMode (iN ){
If (iN> = 48 & iN <= 57) // number
Return 1;
If (iN> = 65 & iN <= 90) // uppercase letter
Return 2;
If (iN> = 97 & iN <= 122) // lower case
Return 4;
Else
Return 8; // special characters
}
// BitTotal Function
Function bitTotal (num ){
Modes = 0;
For (I = 0; I <4; I ++ ){
If (num & 1) modes ++;
Num >>>= 1;
}
Return modes;
}
};

Create a View Model. Before referencing Knockout, we must first reference the Js class library of Knockout. (For details, refer to the series of tutorials in the Knockout Application Development Guide)
The Code is as follows:Copy codeThe Code is as follows: var viewModel = {
Password: ko. observable (""),
Ocolor: "# eeeeee"
};
The password strength and color values depend on the password string values, so we need to declare the dependency attribute for them. The Code is as follows:
ViewModel. PasswordLevel = ko. dependentObservable (function (){
Return Page. Utility. Registration. getPasswordLevel (this. Password ());
}, ViewModel );
ViewModel. Lcolor = ko. dependentObservable (function (){
// Determine the background color of the first cell based on the password strength
Return this. PasswordLevel () = 0? This. Ocolor: (this. PasswordLevel () = 1? "# FF0000": (this. PasswordLevel () = 2? "# FF9900": "#33CC00 "))
}, ViewModel );
ViewModel. Mcolor = ko. dependentObservable (function (){
// Determine the background color of the second cell based on the password strength
Return this. PasswordLevel () <2? This. Ocolor: (this. PasswordLevel () = 2? "# FF9900": "#33CC00 ")
}, ViewModel );
ViewModel. Hcolor = ko. dependentObservable (function (){
// Determine the background color of the third cell based on the password strength
Return this. PasswordLevel () <3? This. Ocolor: "#33CC00"
}, ViewModel );
Then bind the view model to the page using the applyBindings method. You can use the ready function of jQuery to run the binding code, or run the binding code at the bottom of the page, jQuery is used here. The Code is as follows:
$ (Function (){
Ko. applyBindings (viewModel );
}));

Finally, let's take a look at how these values are dynamically bound to HTML elements. See the following code (afterkeydown replaces onKeyUp and onBlur ):Copy codeThe Code is as follows: <form name = "form1" action = "">
Enter the password:
<Input type = "text" size = "10" data-bind = "value: Password, valueUpdate: 'afterkeylow'">
<Br>
Password strength:
<Table width = "217" border = "1" cellspacing = "0" cellpadding = "1" bordercolor = "# cccccc"
Height = "23" style = 'display: inline'>
<Tr align = "center" bgcolor = "# eeeeee">
<Td width = "50" data-bind = "style: {backgroundColor: Lcolor}"> weak </td>
<Td width = "50" data-bind = "style: {backgroundColor: Mcolor}"> medium </td>
<Td width = "50" data-bind = "style: {backgroundColor: Hcolor}"> strong </td>
</Tr>
</Table>
</Form>

Then click OK and run the code to view the same functions.
If the Code improved for verification is removed, the total code is certainly less than the original method.
The full version code is as follows:Copy codeThe Code is as follows: <! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Script type = "text/javascript" src = "http://knockoutjs.com/js/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "http://knockoutjs.com/js/jquery.tmpl.js"> </script>
<Script type = "text/javascript" src = "http://knockoutjs.com/js/knockout-1.2.1.js"> </script>
</Head>
<Body>
<Script type = "text/javascript">
Var Page = Page | {};
Page. Utility = Page. Utility || {};
Page. Utility. Registration = Page. Utility. Registration || {};
// Obtain the password strength
Page. Utility. Registration. getPasswordLevel = function (password ){
If (password = null | password = '')
Return0;
If (password. length <= 4)
Return0; // The password is too short
Var Modes = 0;
For (I = 0; I <password. length; I ++ ){
Modes | = CharMode (password. charCodeAt (I ));
}
Return bitTotal (Modes );
// CharMode Function
Function CharMode (iN ){
If (iN> = 48 & iN <= 57) // number
Return1;
If (iN> = 65 & iN <= 90) // uppercase letter
Return2;
If (iN> = 97 & iN <= 122) // lower case
Return4;
Else
Return8; // special characters
}
// BitTotal Function
Function bitTotal (num ){
Modes = 0;
For (I = 0; I <4; I ++ ){
If (num & 1) modes ++;
Num >>>= 1;
}
Return modes;
}
};
Var viewModel = {
Password: ko. observable (""),
Ocolor: "# eeeeee"
};
ViewModel. PasswordLevel = ko. dependentObservable (function (){
Return Page. Utility. Registration. getPasswordLevel (this. Password ());
}, ViewModel );
ViewModel. Lcolor = ko. dependentObservable (function (){
// Determine the background color of the first cell based on the password strength
Returnthis. PasswordLevel () = 0? This. Ocolor: (this. PasswordLevel () = 1? "# FF0000": (this. PasswordLevel () = 2? "# FF9900": "#33CC00 "))
}, ViewModel );
ViewModel. Mcolor = ko. dependentObservable (function (){
// Determine the background color of the second cell based on the password strength
Returnthis. PasswordLevel () <2? This. Ocolor: (this. PasswordLevel () = 2? "# FF9900": "#33CC00 ")
}, ViewModel );
ViewModel. Hcolor = ko. dependentObservable (function (){
// Determine the background color of the second cell based on the password strength
Returnthis. PasswordLevel () <3? This. Ocolor: "#33CC00"
}, ViewModel );
$ (Function (){
Ko. applyBindings (viewModel );
}));
</Script>
<Form name = "form1" action = "">
Enter the Password: <input type = "text" size = "10" data-bind = "value: Password, valueUpdate: 'afterkeydown'">
<Br>
Password strength:
<Table width = "217" border = "1" cellspacing = "0" cellpadding = "1" bordercolor = "# cccccc"
Height = "23" style = 'display: inline'>
<Tr align = "center" bgcolor = "# eeeeee">
<Td width = "50" id = "strength_L" data-bind = "style: {backgroundColor: Lcolor}">
Weak
</Td>
<Td width = "50" id = "strength_M" data-bind = "style: {backgroundColor: Mcolor}">
Medium
</Td>
<Td width = "50" id = "strength_H" data-bind = "style: {backgroundColor: Hcolor}">
Strong
</Td>
</Tr>
</Table>
</Form>
</Body>
</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More