使用 AutoPostBack=true 防止 asp.net 文本框的 OnTextChanged 事件答案

【问题标题】：Prevent OnTextChanged event for an asp.net TextBox with AutoPostBack=true使用 AutoPostBack=true 防止 asp.net 文本框的 OnTextChanged 事件
【发布时间】：2011-08-13 05:52:06
【问题描述】：

在我的 asp.net 页面中，我有以下文本框（用于电子邮件地址）：

<asp:TextBox ID="EmailTextBox" runat="server" AutoPostBack="true" 
             OnTextChanged="EmailTextBox_TextChanged"/>

我想在 OnTextChanged 回发之前验证客户端的电子邮件地址，我用 jquery 做了以下操作：

$("#EmailTextBox").live("change", function(event) {
  var ValidEmail = ValidateEmail();

  if (ValidEmail == false)
    event.preventDefault();
});

但是，即使 ValidEmail 返回 false，也会发生回发。

为什么会这样？有任何想法吗？如果电子邮件地址无效，如何抑制服务器端更改事件？

验证函数：

function CheckExist(Email) {

var IsAvailable = false;
var parameters = JSON.stringify({ 'Email': Email });
//$("#CheckEmailDiv").show().delay(300);
$.ajax({
    async: false,
    type: "POST",
    url: "MyWebService.asmx/CheckAvailable",
    data: parameters,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response) {
        IsAvailable = response.d;
        // $("#CheckEmailDiv").hide();

    }
});

return IsAvailable;

} 函数 ValidateEmail() {

var valid = true;

var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
var Email = $("#EmailTextBox").val();
var EmailError = "";
if (!pattern.test(Email)) {
    EmailError = "**Email empty or invalid";

}
else {
       var IsAvailable = CheckAvailable(Email);
       if (IsAvailable == true)
           EmailError = "**The email you typed doesnt exist";

} 如果（电子邮件错误！=“”）{ 有效=假； $("#EmailErrorSpan").html(EmailError); $("#EmailErrorSpan").show(); } 别的 $("#EmailErrorSpan").hide(); 返回有效；

}

【问题讨论】：

标签： jquery asp.net html validation

【解决方案1】：

您需要 EmailText 框的 clientID，这是 jquery 可以访问它的名称。所以下面一行：

$("#EmailTextBox").live("change", function(event)

需要：

$("#<%=EmailTextBox.ClientID%>").live("change", function(event)

这是因为客户端上的 ID 不一定与您的 aspx 中的 ID 相同，并且由于 jquery 只能操作 HTML 中可用的 ID，因此它需要该值。

【讨论】：

您现在还可以在 webforms 控件中使用 ClientIDMode="Static" 以防止您的 id 被破坏。那么你实际上可以做$('#myid').whatever()
@m.edmondson 你没有忘记另一个 %> for $("#
如果它仍然不起作用，您将不得不发布更多关于var ValidEmail = ValidateEmail(); does的内容
上面改变了。我猜这个问题是由自动回发引起的。因为当我使用简单的 html 输入时，jqeury 事件 .change 会触发，但 html 输入没有服务器端更改
这很可能是因为 ID 匹配 - 在浏览器中查看源代码以了解我的意思

【解决方案2】：

问题是内联 onchange 将首先触发。可能有更好的方法来处理它，但这可能会奏效：

$(function() {
    var oldChange=$("#myinput").attr("onchange");
    $("#myinput").removeAttr("onchange");

    $("#myinput").change(function(event) {
        alert('mychange');

        if($(this).val().length>5){
             oldChange();   
        }
    });
});

基本上，将旧的 onchange 存储在一个变量中，将其从元素中删除并附加您自己的 onchange。然后在您的 onchange 中仅在条件合适时调用它。尽管取决于 onchange 的组成，您可能会遇到问题（在我的脑海中，传递“this”可能是个问题）。

见小提琴：http://jsfiddle.net/ZCLxY/1/

请注意，其他答案中提出的问题也可能是一个问题。确保您的选择器实际上正在获取元素，并且 .net 没有创建一些疯狂的 ID。

【讨论】：