文本框的asp.net onkeyup事件

Question

我在使用文本框的onkeyup事件中遇到问题。我的功能是检查密码文本框的密码强度。所以当用户输入密码时，如果密码非常弱/弱/中/强，它将调用密码强度检查功能并显示在标签中。此外，文本框背景将根据密码的强度显示颜色。但是，当我输入密码文本框时，标签不显示任何内容，并且文本框不会更改颜色。

<asp:TextBox ID="tb_password" runat="server" TextMode="Password" onKeyUp="checkPasswordStrength()" ></asp:TextBox> 
         <script type="text/javascript"> 
    function checkPasswordStrength() 
    { 
     var passwordTextbox = document.getElementById("tb_password"); 
     var password = passwordTextbox.value; 
     var specialCharacters = "!@#$%^&*_+"; 
     var passwordScore = 0; 

     for (var i = 0; i < password.length; i++) 
     { 
      if(specialCharacters.indexOf(password.charAt(i) > -1)) 
      { 
       passwordScore += 20; 
      } 
     } 

     if (/[a-z]/.test(password)) 
     { 
      passwordScore += 20; 
     } 

     if (/[A-Z]/.test(password)) { 
      passwordScore += 20; 
     } 

     if (password.length >= 8) { 
      passwordScore += 20; 
     } 

     if (/[\d]/.test(password)) { 
      passwordScore += 20; 
     } 

     var strength = ""; 
     var backgroundColor = ""; 

     if (passwordScore >= 100) 
     { 
      strength = "Strong" 
      backgroundColor = "green"; 
     } 

     else if (passwordScore >= 80) 
     { 
      strength = "Medium" 
      backgroundColor = "yellow"; 
     } 

     else if (passwordScore >= 60) { 
      strength = "Weak" 
      backgroundColor = "red"; 
     } 

     else 
     { 
      strength = "Very Weak" 
      backgroundColor = "maroon"; 
     } 

     document.getElementById("lbl_passwordStrength").innerHTML = strength; 
     passwordTextbox.style.color = "white"; 
     passwordTextbox.style.backgroundColor = backgroundColor; 
    } 

</script> 
         <br /> 
         <asp:Label ID="lbl_passwordStrength" runat="server"></asp:Label> 

Answer 1

ASP.NET网页中包含的每个控件都必须包含唯一标识符（ID）。为了保持这种独特性，ASP.Net会在页面呈现为HTML时更改控件的ID。

这里，如果下面的控件在<asp:ContentPlaceHolder>的内部，那么ID很可能变为例如ctl00$ctl00$ContentPlaceHolder$tb_password。

<asp:TextBox ID="tb_password" runat="server" TextMode="Password" onKeyUp="checkPasswordStrength()"></asp:TextBox> 

为了克服这一点你可以做什么，要么使用客户端模式在加价或在JavaScript中使用客户端ID 。

方法1：

<asp:TextBox ID="tb_password" runat="server" TextMode="Password" onKeyUp="checkPasswordStrength()" ClientMode="Static"></asp:TextBox> 

方法2：

var passwordTextbox = document.getElementById("<%=tb_password.ClientID%>"); 
. 
. 
. 
. 
document.getElementById("<%=lbl_passwordStrength.ClientID%>").innerHTML = strength; 
passwordTextbox.style.color = "white"; 
passwordTextbox.style.backgroundColor = backgroundColor;