如何在Ajax验证中使用WTForms？

Question

我习惯于在我的Flask应用程序中使用Flask-WTF来使用WTForms。进行服务器端验证很简单。但是，如何利用此服务器验证成为字段级别的、ajax、客户端验证呢？因此，当用户切换到另一个输入字段时，我的应用程序可以直接进行验证并提供验证警告/信息/错误。

我还没有在互联网上找到相关资源。

- swdev

---

如果您的应用程序需要尽可能安全，那么服务器端和客户端验证代码之间不存在冗余。我通常会同时进行两者的验证。 - OzzyTheGiant

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以公开错误。

• 如果您在前一个模糊事件返回之前收到新的模糊事件，则可能希望中止挂起的ajax POST并使用更新的字段值启动新的POST请求。为避免竞争条件，您每次应仅有一项挂起的验证请求。

- Miguel Grinberg

---

太好了！清晰明了的答案。目前我也在这方面工作，虽然体验是客户端验证，但实际上是通过ajax post请求调用的服务器端验证。完成这个任务后，我会更新我的问题。谢谢。 - swdev

只是想指出：虽然这种方法将验证代码保持在一个地方（无需编写重复的JavaScript代码来进行真正的客户端验证），但它确实会导致很多流量发送到服务器，特别是如果表单变得很大。在每次失去焦点时，都需要进行完整的往返操作，在其中还必须运行整个Flask/WTForms代码。但是正如所说的，要进行真正的客户端验证，就必须在JavaScript中编写更多或更少的重复验证代码。选择... - Timusan

@Miguel，你有这种实现的任何资源吗？我正在尝试在我的验证过程中实现这个解决方案。 - Iron Fist

Answer 2

一个很好的问题。这是我们做的事情（flask后端，jquery前端）：

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

- Peter Lada

---

我一直在考虑使用wtforms-json。你能详细介绍一下你的使用经验吗？ - Ryan

对我来说没问题。非常透明，但我会指定具体的库版本。由于它会修补其他库，所以我会谨慎地不让包更新到最新版本... - Peter Lada