不知道大家有没有注意,再现在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 >
< 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;
}
结果就如下了
{
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;
}