javascript - jquery "return false"在更新面板内无法正常工作

Question

我使用 jquery 来验证更新面板中放置的文本框

$("[id*='btnCreate']").live('click', function () 
{
  var regex = new RegExp("^[a-zA-Z0-9]+$");
  if (!regex.test($("[id*='txtbxTemplateName']").val())) 
  {
     alert('hit');

     $("[id*='lblError']").text() = 'Template name is invalid!';

     return false;
  }
});

点击事件函数正在被调用，但返回 false 后仍然会触发后面的代码。

请帮我解决这个问题。

Answer 1

我认为您的意思是“仍然点击后面的代码”，按钮的默认操作没有被阻止。这是因为代码永远不会因为错误而返回 false:

$("[id*='lblError']").text() = 'Template name is invalid!';
return false;

应该是

$("[id*='lblError']").text('Template name is invalid!');
return false;

但是，您刚刚揭示了为什么 return false 是阻止事件默认操作的糟糕方法。这很糟糕，因为错误处理程序中的任何错误都意味着默认操作不会被阻止，因为 return false 是处理程序中的最后一个语句。

如果您使用event.preventDefault() ，各种美好的事情都会发生。其中最主要的是您可以将语句放在处理程序的前面:

$("[id*='btnCreate']").live('click', function (event) {
  var regex = new RegExp("^[a-zA-Z0-9]+$");
  if (!regex.test($("[id*='txtbxTemplateName']").val())) {
    event.preventDefault();
    alert('hit');
    $("[id*='lblError']").text('Template name is invalid!');
  }
});