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

Question

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

Answer 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>

然后您可以将此函数附加到控件 change 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 指出的那样。

Answer 2

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