Ajax(8)PasswordStrength的用法

不知道大家有没有注意，再现在QQ更改密码时有一个提示你密码强度的东东，今天我们就来说说这个方法是怎么做的，让我们马上开始吧。
第一：建立一个AJAX项目，在页面上放入三个TextBox，三个Label，三个PasswordStrength控件，把三个PasswordStrength控件的TargetControlID分别对应三个TextBox，把三个PasswordStrength的HelpStatusLabelID对应三个Label，完整的HTML代码如下：

< body >
     < form id = " form1 "  runat = " server " >
         < asp:ScriptManager ID = " ScriptManager1 "  runat = " server "   />
         < div >
                 < br  />
         & nbsp; Text Indicators < br  />
         & nbsp;
         < asp:TextBox ID = " TextBox1 "  runat = " server " ></ asp:TextBox >& nbsp; < br  />
         & nbsp;
         < asp:Label ID = " Label1 "  runat = " server "  Width = " 153px " ></ asp:Label >< br  />
         < br  />
         & nbsp; Status Bar Indicators < br  />
         & nbsp;
         < asp:TextBox ID = " TextBox2 "  runat = " server " ></ asp:TextBox >< br  />
         & nbsp;
         < asp:Label ID = " Label2 "  runat = " server "  Width = " 154px " ></ asp:Label >< br  />
         < br  />
         & nbsp; Help Indicators < br  />
         & nbsp;
         < asp:TextBox ID = " TextBox3 "  runat = " server " ></ asp:TextBox >< br  />
         & nbsp;
         < asp:Label ID = " Label3 "  runat = " server "  Width = " 154px " ></ asp:Label >< br  />
             < br  />
         < br  />
             < ajaxToolkit:PasswordStrength ID = " PasswordStrength1 "  runat = " server "  TargetControlID = " TextBox1 "  
                DisplayPosition = " RightSide "
                StrengthIndicatorType = " Text "  
                PreferredPasswordLength = " 10 "  
                PrefixText = " Strength: "  
                TextStrengthDescriptions = " Very Poor;Weak;Average;Strong;Excellent "  
                MinimumNumericCharacters = " 0 "  
                MinimumSymbolCharacters = " 0 "  
                HelpStatusLabelID = " Label1 "  
                TextCssClass = " TextIndicator_TextBox1 "  
                RequiresUpperAndLowerCaseCharacters = " false " >
             </ ajaxToolkit:PasswordStrength >
             < ajaxToolkit:PasswordStrength ID = " PasswordStrength2 "  runat = " server "  TargetControlID = " TextBox2 "  
                DisplayPosition = " RightSide "
                StrengthIndicatorType = " BarIndicator "  
                BarIndicatorCssClass = " barindicater_TextBox2 "  
                BarBorderCssClass = " barborder_TextBox2 "
                PreferredPasswordLength = " 10 "  
                PrefixText = " Strength "  
                TextStrengthDescriptions = " Very Poor;Weak;Average;Strong;Excellent "  
                MinimumNumericCharacters = " 1 "  
                MinimumSymbolCharacters = " 1 "  
                HelpStatusLabelID = " Label2 "  
                RequiresUpperAndLowerCaseCharacters = " true " >
             </ ajaxToolkit:PasswordStrength >
             < ajaxToolkit:PasswordStrength ID = " PasswordStrength3 "  runat = " server "    TargetControlID = " TextBox3 "  
                TextCssClass = " barindicater_TextBox3 "  
                DisplayPosition = " RightSide "
                StrengthIndicatorType = " Text "
                PreferredPasswordLength = " 20 "  
                PrefixText = ""  
                MinimumNumericCharacters = " 2 "  
                MinimumSymbolCharacters = " 2 "  
                HelpStatusLabelID = " Label3 "  
                HelpHandleCssClass = " barborder_TextBox3 "  
                HelpHandlePosition = " BelowRight "  
                TextStrengthDescriptions = " 差; 低; 一般; 较好; 高;很高; 很高很高 "  
                RequiresUpperAndLowerCaseCharacters = " true "   >
             </ ajaxToolkit:PasswordStrength >
         </ div >
     </ form >    
</ body >

其它的属性我想大家的外语都不差，都看得懂，以为我都看得懂。
第四：写上面这几个样式得CSS。如下：

.text_indicater_TextBox1
{
    background-color:Gray;
    color:white;
    font-family:Arial;
    font-size:x-small;
    font-style:italic;
    padding:2px 3px 2px 3px;
}
.barindicater_TextBox2
{
    background-color:Blue;
    color:Blue;
    padding-bottom:1px;
    
}
.barborder_TextBox2
{
    border-style:solid;
    border-width:1px;
    width:200px;
    vertical-align:middle;
    
}
.barindicater_TextBox3
{
    background-color:Blue;
    color:Yellow;
    font-size:small;
    font-variant:small-caps;
    padding:2px 3px 2px 3px;
    
}
.barborder_TextBox3
{
    width:200px;
    height:14px;
    background-image:url(C:\Documents and Settings\gj1\My Documents\My Pictures\24.gif);
    overflow:hidden;
    cursor:help;
    
}

结果就如下了