使用ASP.NET Atlas開發(fā)檢測密碼強度的自定義Behavior

2019-11-17 05:49:26

字體：大中小

來源：轉載

供稿：網(wǎng)友

本文源于維生素C.net的一篇文章利用數(shù)學方法來大大降低一個邏輯判定實現(xiàn)的難度的例子。檢測代碼來自THIN的檢驗密碼強度的JS類。Atlas中提供了客戶端javascript強大的面向對象功能，這幾天看到了上述二位的帖子，覺得這個功能需求在日常開發(fā)中還是很常見的。晚上閑來無事，將上述功能封裝為Atlas中的Behavior，以方便重用。關于Atlas的Behavior，請參考：在 asp.net Atlas中創(chuàng)建自定義的Behavior。按照在ASP.NET Atlas中創(chuàng)建自定義的Behavior這篇文章的五個自定義步驟，很輕易寫出了這個Behavior。其中最重要的部分為檢驗密碼強度的算法，這里我偷了個懶，只是簡單的將THIN的代碼完全Copy過來（兄弟不要罵我-_-b），有心的朋友可以將它重構成更“Atlas”的樣子。這個檢測函數(shù)將在每次用戶在相應的input中按鍵時被觸發(fā)：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],//字符加數(shù),分別為字母，數(shù)字，其它
        KindFactor : [0,0,10,20],//密碼含幾種組成的加數(shù)
        Regex : [/[a-zA-Z]/g,//d/g,/[^a-zA-Z0-9]/g] //字符正則數(shù)字正則其它正則
        }
    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>就是這么簡單，瀏覽器中如下：簡單密碼：