Question

我试图验证TextBox并单击asp.net的按钮。

<asp:TextBox ID="txtEmail" Placeholder="E-mail" runat="server"></asp:TextBox>
<asp:Button ID="btnLogin" OnClick="btnLogin_Click" runat="server" Text="Login" />

这是一个jQuery代码，它验证TextBox然后触发OnClick方法：

var al = document.getElementById('<%=lblAlert.ClientID%>');
var email = document.getElementById('<%=txtEmail.ClientID%>');
var msg = null;
$(document).ready(function () {
  $('#<%=btnLogin.ClientID%>').on('click', function (e) {
      if (email.innerText == '') {
          msg = 'Please! enter email address.';
          al.innerText = msg;
      }
      else {
          $('#<%=btnLogin.ClientID%>').click();
      }
  });
});

编辑：

OnClick方法是：

protected void btnLogin_Click(object sender, EventArgs e)
{
  // some code
}

Answer 1

您应该在需要时使用event.preventDefault()取消点击事件。

$(document).ready(function () {
  $('#<%=btnLogin.ClientID%>').on('click', function (e) {
      if (email.innerText == '') {
          msg = 'Please! enter email address.';
          al.innerText = msg;
          e.preventDefault();
      }
  });
});

如果验证成功，则无需再次调用click。

Answer 2

因为在HTML中你的按钮在调用jquery时已经被点击了，你的

  else {
      $('#<%=btnLogin.ClientID%>').click();
  }

是多余的。

如果你想验证然后点击，那么你应该使用不同的元素作为按钮

如果你想使用相同的按钮（推荐），那么你必须在验证失败时通过返回false来阻止回发。

简单的HTML概念

    <asp:Button ID="btnLogin" OnClick="btnLogin_Click" runat="server" Text="Login" OnClientClick="return false;" />

永远不会导致回发

这是我要做的事情

<asp:TextBox ID="txtEmail" Placeholder="E-mail" runat="server"></asp:TextBox>
<asp:Button ID="btnLogin" OnClick="btnLogin_Click" runat="server" Text="Login" OnClientClick="ValidateMe()" />
<script>
var al = document.getElementById('<%=lblAlert.ClientID%>');
var msg = null;
function ValidateMe() {
  var email = document.getElementById('<%=txtEmail.ClientID%>');
      if (email.innerText == '') {
          msg = 'Please! enter email address.';
          al.innerText = msg;
          return false;
      }
      else {
          return true;
      }
}
</script>

防止回发并使用jQuery运行OnClick

编辑：

2 个答案: