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

Question

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

<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);
           }
        });
     }
}

网络服务方法

[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 testValidate(); 执行一个函数调用并立即返回，不给 testValidate() 一个完成运行的机会 where as return false; 返回立即为假。

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