如何仅在最少字符后检查密码强度

Question

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

Answer 1

附加到

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

Answer 2

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

话虽如此，您可能能够做的是编写类似于以下内容的黑客：

<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 事件添加到控件中，如下所示（代码隐藏）：

控制。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函数将在您的函数之后触发，因此将显示设置为"none"会被工具包清除。 这段代码的作用是从页面中删除标签并将其放在div 中，然后我们只需将div 的 display 属性设置为任何内容，这将有效地隐藏标签。 不过有一个奇异的错误：当按退格键删除字符时，div 在某些情况下不会消失。 我真的没有时间追踪这个问题，但你清理它应该是微不足道的。

此外，我在Chrome中的onChange上遇到了一些问题，因此选择了onKeyDown，而不是如上所述@Adriano指出的。