从 ASP.NET 文本框中使用 javascript答案

【问题标题】：Using javascript from an ASP.NET textbox从 ASP.NET 文本框中使用 javascript
【发布时间】：2015-01-15 16:57:38
【问题描述】：

我目前正在制作一个 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>

【问题讨论】：

检查浏览器的 JavaScript 控制台是否有错误。
感谢您的回答；我检查过，每当 onclick 触发时，我都会在相关的 javascript 函数中看到“Uncaught TypeError: Cannot read property 'value' of null”，尽管 GetElementById 函数看起来很不错……有什么见解吗？
@mason 这实际上是解决我的问题的关键。谢谢:)

标签： javascript asp.net textbox validation

【解决方案1】：

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

在 web.config 级别更改客户端 ID 模式，以便您在客户端和服务器端的 ID 相同。或者，通过标记中各自的属性在 Page 或 Control 级别设置它。

【讨论】：

【解决方案2】：

哦，来吧。 :)

显然它与作为 ASP:Content placeholder 标记的一部分的页面有关，该标记表示每个页面的母版页内容的实现。

看起来，内容占位符将它们的值添加到其中的控件 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;
        }
    }

【讨论】：

只是好奇，你为什么不使用 jquery validate 插件。那会让事情变得更简单。此外，在您的 validator.js 中仅使用 jquery 来选择元素而不是 getElementById 会是更好的方法。
比硬编码控件的前缀更好（因为它可以改变）你应该在web.config级别更改ClientIdMode。那么服务器端的ID会和客户端的ID匹配。
Im not sure how to do that, never actually touched the web.config file. If you'll show me ill 确保您获得应得的 25 分。 :)
我很好奇为什么你不接受我的回答然后又接受了你的回答，尽管事实上我的回答包含了你的解决方案并且首先出现在这里。
@mason 我不确定。我一直在玩 web.config 一段时间，但它似乎不适合；在这个问题的背景下，它主要与母版页有关。无论如何我都会接受你的。

【解决方案3】：

您可以使用预处理器指令来使用为客户端生成的 ID，而不是更改您的 web.config：

所以而不是：

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;

【讨论】：