Author: Dflying Chen ( http://dflying.cnblogs.com/ )
This article is derived from an article on Vitamin C.net that uses mathematical methods to greatly reduce the difficulty of implementing a logical judgment. The detection code comes from THIN's JS class for checking password strength.
Atlas provides powerful object-oriented functions of client-side JavaScript. I have seen the posts of the two above in the past few days and feel that this functional requirement is still very common in daily development. I have nothing to do at night, so I encapsulate the above functions into Behaviors in Atlas for easy reuse. For information about Atlas' Behavior, please refer to: Creating Custom Behavior in ASP.NET Atlas.
Following the five customization steps in this article on Creating a Custom Behavior in ASP.NET Atlas, it is easy to write this Behavior. The most important part is the algorithm for testing the password strength. I was lazy here and simply copied the THIN code completely (brother, don’t scold me -_-b). Interested friends can reconstruct it into something more " Atlas" look. This detection function will be triggered every time the user presses a key in the corresponding input:
function keyPressHandler() {
// you may refactor this part to make the code more 'Atlas like' :-)
var PasswordStrength ={
Level: ["High, it's really high", "It's okay", "Damn, this is okay"],
LevelValue: [30,20,0],//Strength value
Factor: [1,2,5],//Character addends, respectively letters, numbers, others
KindFactor: [0,0,10,20],//The password contains several types of addends
Regex: [/[a-zA-Z]/g,/d/g,/[^a-zA-Z0-9]/g] //Character regular numbers and other regular rules
}
PasswordStrength.StrengthValue = function(pwd)
{
var strengthValue = 0;
var ComposedKind = 0;
for(var i = 0; i < this.Regex.length;i++)
{
var chars = pwd.match(this.Regex[i]);
if(chars != null)
{
strengthValue += chars.length * this.Factor[i];
ComposedKind++;
}
}
strengthValue += this.KindFactor[ComposedKind];
return strengthValue;
}
PasswordStrength.StrengthLevel = function(pwd)
{
var value = this.StrengthValue(pwd);
for(var i = 0; i < this.LevelValue.length; i++)
{
if(value >= this.LevelValue[i] )
return this.Level[i];
}
}
// end of the refactoring section
$(_checkResultLabelID).innerHTML = PasswordStrength.StrengthLevel(this.control.element.value);
}
At the same time, the attribute checkResultLabelID is added to this Behavior to specify the Label for displaying the test results:
var _checkResultLabelID;
this.get_checkResultLabelID = function() {
return _checkResultLabelID;
}
this.set_checkResultLabelID = function(value) {
if (_checkResultLabelID != value) {
_checkResultLabelID = value;
this.raisePropertyChanged('checkResultLabelID');
}
}
You can also easily add some more fancy functions, such as changing the background color of the prompt text for inputs of different strengths, etc. For the complete source code, please refer to the download at the end of this article.
The steps for testing are also very simple. First, add a reference to this Behavior in ScriptManager:
<atlas:ScriptManager runat="server" ID="ScriptManager1">
<Scripts>
<atlas:ScriptReference Path="PasswordStrengthCheckBehavior.js" />
</Scripts>
</atlas:ScriptManager>
Then add an input to the page to enter the password (type is not set to password in the demo program), and a span to display the test results:
<div>
Enter a password:
<input id="password" type="text" />
<span id="result"></span>
</div>
Finally, Atlas Script promotes the above input to an Atlas control and adds the Behavior we just wrote:
<script type="text/xml-script">
<page xmlns:script=" http://schemas.microsoft.com/xml-script/2005 ">
<components>
<textBox id="password">
<behaviors>
<passwordStrengthCheckBehavior checkResultLabelID="result" />
</behaviors>
</textBox>
</components>
</page>
</script>
It’s that simple, as follows in the browser:
Simple password:
Medium password:
Complex password:
Source code and sample programs can be downloaded here: