Let's see if using knockout is simpler to verify the password strength.
The original code please view:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<body>
<script type= "Text/javascript" >
Charmode function
function Charmode (in) {
if (in >=48&& in <=57)//number
RETURN1;
if (in >=65&& in <=90)//Uppercase
return2;
if (in >=97&& <=122)//lowercase
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; Password is too short
Modes = 0;
for (I =0 < spw.length; i++) {
Modes |= Charmode (spw.charcodeat (i));
}
Return Bittotal (Modes);
}
Pwstrength function
function Pwstrength (pwd) {
O_color = "#eeeeee";
L_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= "" onkeyup= "Pwstrength (this.value)" onblur= "Pwstrength (this.value)" >
<br>
Password strength:
<table width= "217" border= "1" cellspacing= "0" cellpadding= "1" bordercolor= "#cccccc"
height= "style=" ' Display:inline ' >
<TR align= "center" bgcolor= "#eeeeee" >
<TD width= "33%" id= "strength_l" >
Weak
</td>
<TD width= "33%" id= "Strength_m" >
In
</td>
<TD width= "33%" id= "Strength_h" >
Strong
</td>
</tr>
</table>
</form>
</body>
First of all, let's improve the above Bo friend's validation function for the following code:
Copy Code code 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 >= && in <= 57)//number
return 1;
if (in >= && in <= 90)//Capital Letter
return 2;
if (in >= && 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 to create the view Model, but before referencing knockout, we first refer to the JS Class library of knockout (see the Knockout Application Development guide for a series of tutorials)
The code is as follows:
Copy Code code as follows:
var ViewModel = {
Password:ko.observable (""),
Ocolor: "#eeeeee"
};
The password strength and color values depend on the value of the password string, so we need to declare the dependency property for them, 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 grid according to the password strength
return this. Passwordlevel () = = 0? This. Ocolor: (this. Passwordlevel () = = 1? "#FF0000": (This. Passwordlevel () = = 2? "#FF9900": "#33CC00"))
}, ViewModel);
Viewmodel.mcolor = ko.dependentobservable (function () {
Judge the background color of the second grid according to the password strength
return this. Passwordlevel () < 2? This. Ocolor: (this. Passwordlevel () = = 2? "#FF9900": "#33CC00")
}, ViewModel);
Viewmodel.hcolor = ko.dependentobservable (function () {
Judge the background color of the third grid according to the password strength
return this. Passwordlevel () < 3? This. Ocolor: "#33CC00"
}, ViewModel);
Then use the Applybindings method to bind the view model to the page, you can use the jquery ready function to execute the binding code, or you can execute the binding code at the bottom of the page, we use jquery 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, look at the following code (which uses Afterkeydown instead of onkeyup and onblur):
Copy Code code as follows:
<form name= "Form1" action= "" >
Enter Password:
<input type= "text" size= "data-bind=" Value:password, valueupdate: ' Afterkeydown ' ">
<br>
Password strength:
<table width= "217" border= "1" cellspacing= "0" cellpadding= "1" bordercolor= "#cccccc"
height= "style=" ' Display:inline ' >
<TR align= "center" bgcolor= "#eeeeee" >
<TD width= "data-bind=" style: {Backgroundcolor:lcolor} "> Weak </td>
<TD width= "A" data-bind= "style: {backgroundcolor:mcolor}" > </td>
<TD width= "A" data-bind= "style: {Backgroundcolor:hcolor}" > Strong </td>
</tr>
</table>
</form>
Then just OK, run the Code view, the exact same function is displayed.
If you remove the code that is improved for validation, the total code is certainly less than the original method.
The full version of the code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<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>
<body>
<script type= "Text/javascript" >
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 = = ")
Return0;
if (Password.length <=4)
Return0; Password is too short
var Modes = 0;
for (I =0 < 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
return2;
if (in >=97&& <=122)//lowercase
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 () {
Judge the background color of the first grid according to the password strength
Returnthis. Passwordlevel () ==0?this. Ocolor: (this. Passwordlevel () ==1? " #FF0000 ": (This. Passwordlevel () ==2? " #FF9900 ": #33CC00"))
}, ViewModel);
Viewmodel.mcolor = ko.dependentobservable (function () {
Judge the background color of the second grid according to the password strength
Returnthis. Passwordlevel () <2?this. Ocolor: (this. Passwordlevel () ==2? " #FF9900 ": #33CC00")
}, ViewModel);
Viewmodel.hcolor = ko.dependentobservable (function () {
Judge the background color of the second grid according to the password strength
Returnthis. Passwordlevel () <3?this. Ocolor: "#33CC00"
}, ViewModel);
$ (function () {
Ko.applybindings (ViewModel);
}));
</script>
<form name= "Form1" action= "" >
Enter Password: <input type= "text" size= "" data-bind= "Value:password, valueupdate: ' Afterkeydown '" >
<br>
Password strength:
<table width= "217" border= "1" cellspacing= "0" cellpadding= "1" bordercolor= "#cccccc"
height= "style=" ' Display:inline ' >
<TR align= "center" bgcolor= "#eeeeee" >
<TD width= "id=" strength_l "data-bind=" style: {Backgroundcolor:lcolor} ">
Weak
</td>
<TD width= "id=" strength_m "data-bind=" style: {Backgroundcolor:mcolor} ">
In
</td>
<TD width= "id=" Strength_h "data-bind=" style: {Backgroundcolor:hcolor} ">
Strong
</td>
</tr>
</table>
</form>
</body>
