作者: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中按鍵時被觸發:
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>
就是這麼簡單,瀏覽器如下:
簡單密碼:
中等密碼:
複雜密碼:
原始碼以及範例程式可以在此下載: