Atlas开发检测密码强度的自定义Behavior-技术开发专区

Atlas开发检测密码强度的自定义Behavior

作者：Dflying Chen 编辑：晓徐 2006-08-03 13:42

【IT168 技术文档】

    Atlas中提供了客户端JavaScript强大的面向对象功能，这几天看到了几个帖子，觉得这个功能需求在日常开发中还是很常见的。晚上闲来无事，将上述功能封装为Atlas中的Behavior，以方便重用。关于Atlas的Behavior，请参考：在ASP.NET Atlas中创建自定义的Behavior。

    按照在ASP.NET Atlas中创建自定义的Behavior这篇文章的五个自定义步骤，很容易写出了这个Behavior。其中最重要的部分为检验密码强度的算法，这里我偷了个懒，只是简单的将THIN的代码完全Copy过来（兄弟不要骂我-_-b），有心的朋友可以将它重构成更“Atlas”的样子。这个检测函数将在每次用户在相应的input中按键时被触发：

    以下引自THIN的评论，关于如何定制Password Strength，当然，您也可以将其抽出来成为该Behavior的属性：

var PasswordStrength ={
Level : ["高，实在是高","还行啦","这样也行"],
LevelValue : [30,20,0],//强度值 
Factor : [1,2,5],//字符加数,分别为字母，数字，其它 
KindFactor : [0,0,10,20],//密码含几种组成的加数 
Regex : [/[a-zA-Z]/g,/\d/g,/[^a-zA-Z0-9]/g] //字符正则数字正则其它正则 
}

这个部分可改成可以定制的，Level和LevelValue要求统一，如Level改成["高，实在是高","还行啦","太简单了，小心为妙 ","这样也行"]那么LevelValue就应改成LevelValue : [40,30,20,0]//这个强度值我是随便写的，可以多测几个实例找出真正合适的数字。

function keyPressHandler() {

// you may refactor this part to make the code more 'Atlas like' :-) 
var PasswordStrength ={
Level : ["高，实在是高","还行啦","这样也行"],
LevelValue : [30,20,0],//强度值 
Factor : [1,2,5],//字符加数,分别为字母，数字，其它 
KindFactor : [0,0,10,20],//密码含几种组成的加数 
Regex : [/[a-zA-Z]/g,/\d/g,/[^a-zA-Z0-9]/g] //字符正则数字正则其它正则 
}
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);
}

同时在这个Behavior中添加了属性checkResultLabelID，用来指定显示检验结果的Label：

var _checkResultLabelID;
this.get_checkResultLabelID = function() {
return _checkResultLabelID;
}
this.set_checkResultLabelID = function(value) {
if (_checkResultLabelID != value) {
_checkResultLabelID = value;
this.raisePropertyChanged('checkResultLabelID');
}
}

您也可以很方便的添加一些更花哨的功能，例如对于不同强度的输入，提示文字的背景颜色有所改变等。完整的源代码请参考本文后面的下载。

测试的步骤也很简单，首先在ScriptManager中添加这个Behavior的引用：

<atlas:ScriptManager runat="server" ID="ScriptManager1">
<Scripts>
<atlas:ScriptReference Path="PasswordStrengthCheckBehavior.js" />
</Scripts>
</atlas:ScriptManager>

然后在页面上添加一个input，用来输入密码（演示程序中没有设定type为password），和一个span，用来显示检验结果：

<div>
Input a password:
<input id="password" type="text" />
<span id="result"></span>
</div>

最后，Atlas Script中将上面的input提升为Atlas控件，并加入我们刚刚写好的Behavior：

<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>

关注我们