3

我正在使用 AjaxControlToolKit 的 PasswordStrength 控件。一旦用户开始在控件中输入任何内容，它就会开始显示密码很弱的消息。我希望此消息仅在输入最少字符数后出现。我在控件上看不到任何允许此功能的内容。关于我应该如何处理这个问题的任何建议？

4

2 回答 2

2

附加到文本输入的客户端事件。在那里，您可以在（如果您使用文本）中添加/删除一个特殊的 CSS 类，只需一条规则：（使用文本长度作为条件）。change keyupTextCssClassdisplay: none

于 2012-06-08T16:36:20.290 回答
1

您可能需要为此推出自己的解决方案，如果您考虑一下，这是有道理的。通过隐藏两个字符的密码很弱的视觉提示，但为三个字符的密码显示它似乎意味着两个字符的密码就足够了。

话虽这么说，你可能会写一些类似于这样的hack：

<script language="javascript">
  function onPasswordChange(textBox) {
      var passwordLabel = document.getElementById([labelID]);
      if(textBox.value.length < [constant]){
          passwordLabel.style.display = 'none';
      }
      else{
          passwordLabel.style.display = 'inline';            
      } 
  }
</script>

然后，您可以附加此函数，控件更改onKeyUp 或 onKeyDown 事件，以便如果密码字段的长度小于您想要的长度，它将隐藏包含未达到强度的消息的标签。这是未经测试的，只是一个想法。您可能会遇到工具包 javascript 与此脚本冲突的问题，但很难说。

此外，labelID 看起来是 [controlIDName]_PasswordStrength。

编辑：

您可能希望像这样（代码后面）将onchange onKeyUp 或 onKeyDown 事件添加到您的控件中：

control.Attributes.Add("onchange", "onPasswordChange(this)");

 control.Attributes.Add("onKeyDown", "onPasswordChange(this)");

编辑2：就黑客而言，这非常混乱，但它确实有效。客户端：

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

<asp:TextBox ID="password" runat="server"></asp:TextBox>
<div id="PasswordStrengthContainer"></div>
<asp:PasswordStrength ID="PS" runat="server"
TargetControlID="password"  
DisplayPosition="RightSide"  
StrengthIndicatorType="Text"  
PreferredPasswordLength="10"  
PrefixText="Strength:"  
TextCssClass="TextIndicator_TextBox1"  
MinimumNumericCharacters="0"  
MinimumSymbolCharacters="0"  
RequiresUpperAndLowerCaseCharacters="false"  
TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"  
TextStrengthDescriptionStyles="cssClass1;cssClass2;cssClass3;cssClass4;cssClass5"  
CalculationWeightings="50;15;15;20"
/>

 <script language="javascript">


function onPasswordChange(textBox) {
    var passwordLabel = document.getElementById("MainContent_password_PasswordStrength");
    var container = document.getElementById("PasswordStrengthContainer");

    if (passwordLabel != null) {
        document.getElementById("PasswordStrengthContainer").appendChild(
            document.getElementById("MainContent_password_PasswordStrength"));
    }

    if (textBox.value.length < 4) {
        container.style.display = 'none';
    }
    else {
        container.style.display = 'inline';
    }
}
 </script>

服务器端：

 password.Attributes.Add("onKeyDown", "onPasswordChange(this)");
 password.Attributes.Add("onBlur", "onPasswordChange(this)");

此代码效率不高，可以清理，但可用于演示目的。javascript 函数非常基本，但是您会注意到这一行：

 if (passwordLabel != null) {
        document.getElementById("PasswordStrengthContainer").appendChild(
            document.getElementById("MainContent_password_PasswordStrength"));
    }

不幸的是，工具包的 javascript 函数将在您的函数之后触发，因此将显示设置为“无”会被工具包清除。这段代码所做的是从页面中删除标签并将其放在 div 中，然后我们只需将 div 的 display 属性设置为任何内容，这将有效地隐藏标签。但是有一个单一的错误：当按退格键删除字符时，div 在某些情况下不会消失。我真的没有时间追查这个问题，但你应该很容易解决它。

此外，我在 Chrome 中的 onChange 上遇到了一些问题，所以选择了 onKeyDown，正如上面@Adriano 指出的那样。

于 2012-06-08T16:59:13.493 回答