Question

一个非常奇怪的问题，我有一个aspnet web形式的文本框。我使用jquery来验证文本框。如果未通过验证，则文本框会显示红色警告。到目前为止，如果我点击页面中的任何地方并假设我打算输入一个无效的文本进行测试，那就太好了。

我的代码：（更新）

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=TextUserName.ClientID%>").blur(function () {
            ValidateUserNameAfterBlur();
        });
    });

    function ValidateUserName() {
        $.ajax({ type: "POST",
            url: "../UserNameWebService.asmx/ValidateUserName",
            data: "{'strUsername': '" + $("#<%=TextUserName.ClientID%>").val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (data) {
                return data;
            }
        });
    }

    function ValidateUserNameBeforeSubmitting() {
        isValid = ValidateUserName();
        return isValid;
    }

    function ValidateUserNameAfterBlur() {
        isValid = ValidateUserName();
        $('#TextUserNameError').toggle(!isValid);
    }



</script>

其他一些标记代码：

 <td class="style4">
            <asp:TextBox ID="TextUserName" runat="server"></asp:TextBox>
        </td>
        <td>
            <span id="TextUserNameError" style="display:none; color:Red; font-weight:bold;">This is not a valid username</span>
        </td>

然而，网页上有一个asp.net按钮。单击按钮后，错误确实显示出来，但很快就消失了。

按钮的代码：

 <p>
    <asp:Button ID="btnSave" runat="server" Text="SaveChanges" OnClick="btnSave_Click"
        CssClass="saveButton" ValidationGroup="answer" OnClientClick="return ValidateUserNameBeforeSubmitting();" />
</p>

我认为它是由回发引起的，但没有任何线索。感谢专家的帮助。

添加图片 debug

和 data.d

Answer 1

我相信你是对的，这种情况正在发生，因为当你点击按钮（我假设它是一个提交按钮？）时，页面会执行回发。在javascript验证失败时阻止页面回发的一种简单方法是让javascript函数返回'false'。这将阻止页面执行回发。

那就是说，我不确定你为什么要将你的用户名验证连接到document.click。每当用户点击页面时，您的页面似乎都会执行验证，无论该值是否已更改。

对用户输入的文本执行客户端验证的可接受方法是当有问题的控件失去焦点时。在JQuery中，这将是blur()。这样，只有在用户更改了控件中的值时才会运行验证。

这将是您的按钮代码（请注意OnClientClick）：

<asp:Button ID="btnSubmit" runat="server" OnClientClick="return ValidateUserNameBeforeSubmitting();" />

您的javascript应如下所示：

    $(document).ready(function () {
        $("#<%=TextUserName.ClientID%>").blur(function () {
            ValidateUserNameAfterBlur();
        });
    });

    function ValidateUserName() {
        $.ajax({ type: "POST",
            url: "../UserNameWebService.asmx/ValidateUserName",
            data: "{'strUsername': '" + $("#<%=TextUserName.ClientID%>").val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (data) {
                return data;
            }
        });
    }

    function ValidateUserNameBeforeSubmitting() {
        isValid = ValidateUserName();
        return isValid;
    }

    function ValidateUserNameAfterBlur() {
        isValid = ValidateUserName();
        //DISPLAY ERROR MESSAGE
    }

[增订]

工作示例 - 值“123”将返回true以进行验证。其他一切都会变回虚假。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#TextUserName").blur(function () {
            ValidateUserNameAfterBlur();
        });
    });

    function ValidateUserName() {
        return $("#TextUserName").val() == "123";

//      $.ajax({ type: "POST",
//          url: "../UserNameWebService.asmx/ValidateUserName",
//          data: "{'strUsername': '" + $("#<%=TextUserName.ClientID%>").val() + "'}",
//          contentType: "application/json; charset=utf-8",
//          dataType: "json",
//          async: false,
//          success: function (data) {
//              return data;
//          }
//      });
    }

    function ValidateUserNameBeforeSubmitting() {
        isValid = ValidateUserName();
        $('#TextUserNameError').toggle(!isValid);
         return isValid;
    }

    function ValidateUserNameAfterBlur() {
        isValid = ValidateUserName();
        $('#TextUserNameError').toggle(!isValid);
    }



</script></head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextUserName" runat="server" />
        <div ID="TextUserNameError" style="display: none;" >Ooops!</div>
        <br />
        <asp:Button UseSubmitBehavior=true ID="btnSubmit" runat="server" OnClientClick="return ValidateUserNameBeforeSubmitting();" />
    </div>
    </form>
</body>
</html>

单击按钮但未显示错误消息

1 个答案: