使用 ASP.NET 文本框中的 javascript

Question

我目前正在制作一个 ASP.Net 页面作为项目的一部分；在制作主 registration/Login 页面验证器时（标签在 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 "validators":

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

哦拜托。 :)

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

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

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

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

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;

使用 ASP.NET 文本框中的 javascript

Using javascript from an ASP.NET textbox

javascript

asp.net

validation

textbox