javascript - onClientClick return Function() 仍然触发 OnClick

Question

在测试其在 JavaScript 中是否有效后，尝试阻止我的 Button1_Click 提交我的数据。已经尝试了很多次，但无论我在函数中返回什么，它都会提交。

<form runat="server">
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" OnClientClick="return testValidate();" />
</form>

Button1_Click 是一个 C# 函数，目前仅在调用它时提醒我 - 编辑

我的Javascript函数:

function testValidate() { 
return false;
}

我尝试了一些建议的解决方案，例如使用 OnClientClick="if (!testValidate()) return
假；”

但是这些都不起作用

感谢您的提前帮助

Answer 1

很难理解您真正在寻找什么，但如果您不希望在验证失败时提交表单数据，那么您需要将其全部转换为 JavaScript 并设置 ajax 调用(这需要删除OnClick 事件)，或者在 C# 代码函数中进行所有验证，然后您可以使用 bool 来确定是否提交数据。

JavaScript 示例:

function testValidate() { 
    var is_valid = false;
    // Do validation code
    if(is_valid) {
        $..ajax({
           url: //URL location of your webservice,
           method: 'POST',
           contentType: "application/json; charset=utf-8",
           dataType: 'json',
           data: //Form data,
           success: function (data) {

           },
           error: function (data, text, error) {
              alert(error);
           }
        });
     }
}

Web服务方法

[WebMethod]
public void SubmitData(/*Lay out all parameters here*/) 
{
     //Insert form data
}

这一切都在 OnClick 中完成。 (需要删除 OnClientClick，因为不再需要它)

正面:

<form runat="server">
    <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
</form>

C#:

protected void Button1_Click(object sender, EventArgs e) 
{
     bool isValid = false;
     // Do validation
     if(isValid)
     {
         // submit form data
     }
}

如果我误解了您的需求，我提前表示歉意；如果我现在提供的内容不适合您的需求，我愿意修改我的答案。如果这不是您正在寻找的内容，请澄清您的问题。谢谢!

编辑:

这就是 OnClientClick="return false;" 和 OnClientClick="return testValidate();" 不同的原因。

无论代码是否执行完毕，JS 都会在看到 return 语句后立即返回。因此，return testValidate();执行函数调用并立即返回，而不给testValidate()机会完成运行，其中return false;返回立即为假。

为避免立即返回，请尝试使用 OnClientClick="var test = testValidate(); setTimeout(function() { return test; }, 10);"。或者，您可以在超时时间限制(本例中为 10)内设置任意时间(以毫秒为单位)，以便仅在函数完成且测试有值时才返回。或者您可以执行 OnClientClick="testValidate();" ，它将在调用 testValidate() 后将其评估为 bool 值，这将允许您的 return false;要调用的函数并返回 false。我希望这更有意义。