作者：Dflying Chen （http://dflying.VEVb.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中按鍵時被觸發：

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="        <components>
            <textBox id="password">
                <behaviors>
                    <passwordStrengthCheckBehavior checkResultLabelID="result" />
                </behaviors>
            </textBox>
        </components>
    </page>
</script>

就是這么簡單，瀏覽器中如下：

簡單密碼：

中等密碼：

復雜密碼：

源代碼以及示例程序可以在此下載：http://www.survivalescaperooms.com/Files/dflying/PasswordStrengthCheckBehaviorDemo.zip