从ASP.NET文本框中使用javascript

Question

我目前正在制作一个ASP.Net页面作为项目的一部分; 虽然使主注册/登录页面验证器（标签，改变其在javascript上的可见性和触发他们的文本框的OnChange事件），我遇到了一个问题。尽管它在我们的计算机实验室中工作得非常好（这意味着JavaScript代码本身可能是正确的），但验证器根本无法工作 - 无论输入如何。 任何想法为什么它可能发生？

谢谢！

的Javascript：

function isUserValid() { 
    var UserLength = document.getElementById("UserTB").value.length; 
    var ValidatorLabel = document.getElementById("ValidateUser"); 
    if (UserLength < 6 || UserLength > 15) { 
     ValidatorLabel.style.display = 'inline'; 
     return false; 
     } 
    else { 
     ValidatorLabel.style.display = 'none'; 
     return true; 
    } 
    } 
function isPassValid() { 
     var PassLength = document.getElementById("PasswordTB").value.length; 
     var ValidatorLabel = document.getElementById("ValidatePassword"); 
     if (PassLength < 6 || PassLength > 15) { 
      ValidatorLabel.style.display = 'inline'; 
      return false; 
     } 
     else { 
      ValidatorLabel.style.display = 'none'; 
      return true; 
     } 
    } 
function isConfirmValid() { 
     var Password = document.getElementById("PasswordTB").value; 
     var Me = document.getElementById("ConfirmTB").value; 
     var ValidatorLabel = document.getElementById("ValidateConfirm"); 
     if (Password == Me) { 
      ValidatorLabel.style.display = 'none'; 
      return true; 
     } 
     else { 
      ValidatorLabel.style.display = 'inline'; 
      return false; 
     } 
    } 
function isEmailValid() { 
     var str = document.getElementById("EmailTB").value; 
     var lastAtPos = str.lastIndexOf('@'); 
     var lastDotPos = str.lastIndexOf('.'); 
     var isFine = (lastAtPos < lastDotPos && lastAtPos > 0 && str.indexOf('@@') == -1 && lastDotPos > 2 && (str.length - lastDotPos) > 2); 
     var ValidationLabel=document.getElementById("ValidateEmail"); 
     if(isFine) 
     { 
      ValidationLabel.style.display='none'; 
      return true; 
     } 
     else 
     { 
      ValidationLabel.style.display='inline'; 
      return false; 
     } 
    } 

在ASP：

<script src="Validators.js" type="text/javascript"></script> 
.... 

ASP “验证”：

Username:<br /> 
    <asp:TextBox ID="UserTB" runat="server" OnChange="return isUserValid();" AutoPostBack="false"></asp:TextBox> 
    <asp:Label ID="ValidateUser" runat="server" ForeColor="Red" 
     Text="Username must be 6-15 characters in length, and contain no special characters." CssClass="Validators"></asp:Label> 
    <br /><br /> 
    Password:<br /> 
    <asp:TextBox ID="PasswordTB" runat="server" OnChange="return isPassValid();" AutoPostBack="false"></asp:TextBox> 
    <asp:Label ID="ValidatePassword" runat="server" ForeColor="Red" 
     Text="Password must be 6-15 characters in length, and contain no special characters." CssClass="Validators"></asp:Label> 
    <br /><br /> 
    Confirm password:<br /> 
    <asp:TextBox ID="ConfirmTB" runat="server" OnChange="return isConfirmValid();" AutoPostBack="false"></asp:TextBox> 
    <asp:Label ID="ValidateConfirm" runat="server" ForeColor="Red" 
     Text="This field must match the password field." CssClass="Validators"></asp:Label> 
    <br /><br /> 
    Email:<br /> 
    <asp:TextBox ID="EmailTB" runat="server" OnChange="return isEmailValid();" AutoPostBack="false"></asp:TextBox> 
    <asp:Label ID="ValidateEmail" runat="server" ForeColor="Red" Text="Invalid Email." CssClass="Validators"></asp:Label> 

Answer 1

<configuration>  
    <system.web> 
     <pages clientIDMode="Static" /> 
    </system.web> 
</configuration> 

更改在web.config中级别的客户端ID模式，使您的ID在客户端和服务器端的将是相同的。或者，通过标记中各自的属性将其设置为页面或控制级别。

Answer 2

唉呦。 :)

显然它必须处理页面作为ASP的一部分：内容占位符标记，它表示每个页面的母版页内容的实现。

看起来，内容占位符将它们的值添加到它们中的控件的ID;由于我的网页被称为PageContent，因此解决方案是将所有内容都改为PageContent_（实际控件的名称）。

完整的解决方案： JS：

function isUserValid() { 
    var UserLength = document.getElementById("PageContent_UserTB").value.length; 
    var ValidatorLabel = document.getElementById("PageContent_ValidateUser"); 
    if (UserLength < 6 || UserLength > 15) { 
     ValidatorLabel.style.display = 'inline'; 
     return false; 
     } 
    else { 
     ValidatorLabel.style.display = 'none'; 
     return true; 
    } 
    } 
function isPassValid() { 
var PassLength = document.getElementById("PageContent_PasswordTB").value.length; 
var ValidatorLabel = document.getElementById("PageContent_ValidatePassword"); 
     if (PassLength < 6 || PassLength > 15) { 
      ValidatorLabel.style.display = 'inline'; 
      return false; 
     } 
     else { 
      ValidatorLabel.style.display = 'none'; 
      return true; 
     } 
    } 
function isConfirmValid() { 
var Password = document.getElementById("PageContent_PasswordTB").value; 
var Me = document.getElementById("PageContent_ConfirmTB").value; 
var ValidatorLabel = document.getElementById("PageContent_ValidateConfirm"); 
     if (Password == Me) { 
      ValidatorLabel.style.display = 'none'; 
      return true; 
     } 
     else { 
      ValidatorLabel.style.display = 'inline'; 
      return false; 
     } 
    } 
function isEmailValid() { 
var str = document.getElementById("PageContent_EmailTB").value; 
     var lastAtPos = str.lastIndexOf('@'); 
     var lastDotPos = str.lastIndexOf('.'); 
     var isFine = (lastAtPos < lastDotPos && lastAtPos > 0 && str.indexOf('@@') == -1 && lastDotPos > 2 && (str.length - lastDotPos) > 2); 
     var ValidationLabel = document.getElementById("PageContent_ValidateEmail"); 
     if(isFine) 
     { 
      ValidationLabel.style.display='none'; 
      return true; 
     } 
     else 
     { 
      ValidationLabel.style.display='inline'; 
      return false; 
     } 
    } 

Answer 3

而不是改变你的web.config，你可以只使用一个预处理指令要使用的是为客户方产生的ID：

这样，而不是：

var Password = document.getElementById("PasswordTB").value; 

你只需做到这一点：

var Password = document.getElementById("<%=PasswordTB.ClientID%>").value; 

的<%=PasswordTB.ClientID%>会由Visual Studio被替换为客户方ID，像contenttemplate1_blablabla_PasswordTB和页面时到达客户端，它会看起来像这样：

var Password = document.getElementById("contenttemplate1_blablabla_PasswordTB").value;