Question

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

<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，也会发生回发。

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

验证功能：

功能CheckExist（电子邮件）{

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";

} if（EmailError！=“”）{ 有效=假; $（ “＃EmailErrorSpan”）HTML（EmailError）。 $（ “＃EmailErrorSpan”）显示（）。 } 其他 $（ “＃EmailErrorSpan”）隐藏（）。返回有效;

}

Answer 1

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

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

需要：

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

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

Answer 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。

使用AutoPostBack = true防止asp.net TextBox的OnTextChanged事件

2 个答案: