使用ASP.NET Atlas开发检测密码强度的自定义Behavior

作者：Dflying Chen （http://dflying.cnblogs.com/ ）

本文源于维生素C.net的一篇文章利用数学方法来大大降低一个逻辑判断实现的难度的例子。检测代码来自THIN的检验密码强度的JS类。

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>

就是这么简单，浏览器中如下：

简单密码：

中等密码：

复杂密码：

源代码以及示例程序可以在此下载：https://files.cnblogs.com/dflying/PasswordStrengthCheckBehaviorDemo.zip