Ajax(8)PasswordStrength的用法

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

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<br />

  Text Indicators<br />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br />

<asp:Label ID="Label1" runat="server" Width="153px"></asp:Label><br />

<br />

  Status Bar Indicators<br />

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />

<asp:Label ID="Label2" runat="server" Width="154px"></asp:Label><br />

<br />

  Help Indicators<br />

<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />

<asp:Label ID="Label3" runat="server" Width="154px"></asp:Label><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;

}

结果就如下了

posted on 2007-04-01 22:40 过江阅读(1298) 评论(1) 收藏举报

刷新页面返回顶部

Ajax(8)PasswordStrength的用法

公告