javascript - 当文本更改且文本框不失去焦点时调用方法

Question

我正在开发一个网络表单，当前有一个文本更改事件触发器:

protected void txtBox1_TextChanged(object sender, EventArgs e)
  {
     Validate();
  }

我遇到的问题是，只有当用户在框中输入文本并且焦点丢失时才会触发。

我遇到问题的具体场景是:

• 用户在文本框控件中输入文本。
• 用户在文本框控制之外进行点击/选项卡操作。
• 文本框触发器按预期运行，并在控件上显示验证错误。
• 然后用户单击/按 Tab 键返回文本框控件，突出显示现有文本并删除。
• 文本更改后需要在此处运行函数来重置验证消息。
• 无需离开控件即可更新文本。
• 用户点击/选项卡超出控制范围，文本更改触发器再次运行。

Answer 1

这出现在您的 .aspx 页面上:

<asp:TextBox runat="server" ClientIdMode="static" id="txtBox1">

<script type="text/javascript">
$("#txtBox1").on('input propertychange paste', function(){
    $.ajax({
        type: "POST",
        url: "api/MyValidator/ValidateTextBox?text=" + $("#txtBox1").val()
    }) //close AJAX call
    .done(function (resp){
        if(!resp.Valid) {alert('Not valid: ' + resp.msg);}
    }); //close Done handler
}); //close change handler
</script>

以下是 Web API 函数，它将检查数据库并回复 AJAX 请求。

public ValidationResponse ValidateTextBox(string text)
{
    //check your database. If it's good, set valid to true, otherwise false. If not valid, then set reason to the reason why it's not valid.
    bool valid;
    string reason;

    //construct response
    var response = new ValidationResponse(){ Valid = valid, msg = reason};

    //return response
    return response;
}

此外，将此类放在某处:

public class ValidationResponse
{
    public bool Valid {get; set;}
    public string msg {get; set;}
}

我们使用 How to detect a textbox's content has changed 提供的示例检测文本框值何时发生变化。当它发生变化时，我们会生成 AJAX使用 jQuery 调用我们的 Web API ，我们返回一个响应，表明它通过或失败的验证。然后，我们使用 .done() 中的客户端代码来检查 Web API 的响应，并在失败时显示验证失败消息。

我知道这看起来像是很多代码来检查单个文本框。但是，通过一些操作，您可以让它通过单个 AJAX 调用来验证整个表单，并且代码不会比我们现在拥有的代码多多少。

请注意，我故意省略了一些基本的 Web API 配置，因为在一个答案中需要讨论很多内容。我在这里的目的不是给您一个“即插即用”的答案，而是向您展示一旦您了解了 AJAX 和 Web API 的基础知识，使用良好的架构是多么容易。