如何在 Ajax 验证中使用 WTForms？

Question

我习惯于在我的烧瓶应用程序中通过 Flask-WTF 使用 WTForms。进行服务器端验证是微不足道的。但是我如何利用这个服务器验证成为字段级别、ajax、客户端验证？因此，当用户选项卡到另一个输入字段时，我的应用程序可以直接继续验证它并给出验证警告/信息/错误。

我还没有在网上找到资源

Answer 1

一个可能的解决方案如下：

• 在客户端，您将处理程序附加到表单中所有控件中的blur 事件。

• 每次发生模糊事件时，您都会运行一个 Javascript 函数来收集所有字段的值，然后将它们作为 ajax POST 请求提交。

• 在服务器上，处理这个 ajax POST 请求的视图函数会实例化 Flask-WTF 表单，然后对其进行验证。验证导致的任何错误都会收集到字典中，然后以 JSON 响应的形式发送回客户端。

  例如，成功的验证可能会返回以下 JSON：

  { 
      "errors": {}
  }
  

  包含错误的响应可能是：

  {
      "errors": { 
          "name": "This field is required",
          "age": "Enter a numeric value between 0 and 99"
      }
  }
  

• 客户端获取此 JSON 响应并将所需的更改应用于 DOM 以暴露错误。

1234563您一次应该只有一个待处理的验证请求，以避免出现竞争条件。

Answer 2

一个很好的问题。这就是我们所做的（flask 后端、jquery 前端）：

• 使用 jquery.forms 插件来 ajax 表单。相当可靠的成熟代码。缺点，不能发送json编码的数据，只能form-urlencoded。接收普通或 json 数据。
• 使用 wtfroms 进行表单验证。非常成熟的代码库。
• 尝试使用 wtforms-json 来接受 json，非常棘手的问题。