Use Javascript to evaluate the strength of the password entered by the user (Knockout version)_javascript skills

Let's take a look at how to use Knockout to implement password strength verification more simply.
Please view the original code:

Copy code The code is as follows:

< body>

Enter password:


Password strength:
height="23" style='display: inline'>

Weak

中

strong

First we Let’s improve the verification function of the blogger above to the following code:

Copy the code The code is as follows:

var Page = Page || {};
Page.Utility = Page.Utility || {};
Page.Utility.Registration = Page.Utility.Registration || {};
//Get Password strength
Page.Utility.Registration.getPasswordLevel = function (password) {
if (password == null || password == '')
return 0;
if (password.length < ;= 4)
return 0; //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) //Numbers
return 1;
if (iN >= 65 && iN <= 90) //Capital letters
return 2;
if (iN >= 97 && iN <= 122) //Lowercase
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;
}
};

Then create the View Model, but before referencing Knockout, we must first refer to Knockout’s Js class library (please refer to it for details) View the series of tutorials in the Knockout Application Development Guide)
The code is as follows:

Copy the code The code is as follows:

var viewModel = {
Password: ko.observable(""),
Ocolor: "#eeeeee"
};
The values ​​for password strength and color depend on the password The value of the string, so we need to declare dependent properties 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 () {
//Judge 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 ; : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")
}, viewModel);
viewModel.Hcolor = ko.dependentObservable(function () {
//According to Password strength judgment The background color displayed in the third cell
return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00"
}, viewModel);
Then use the applyBindings method to apply the view model To bind to this page, you can use jQuery's ready function to execute the binding code, or you can execute the binding code at the bottom of the page. We used jQuery here, and 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. Please see the following code (where Afterkeydown is used instead of onKeyUp and onBlur):

Copy code The code is as follows: < form name="form1" action="">

Enter password:

Password strength:
height ="23" style='display: inline'>



< ;td width="50"data-bind="style: { backgroundColor: Hcolor }">strong

Weak

Medium

Then OK, run the code to view, and the exact same function is displayed.
If you remove the code improved for verification, the total code will definitely be less than the original method.

The full version code is as follows:

Copy the code The code is as follows:

输入密码:


密码强度:
height="23" style='display: inline'>

弱

中

强