为什么使用第三方表单验证库？

我们刚刚完成了 Chris Ferdinandi 关于现代表单验证的一系列精彩文章。它 从这里开始。如今，浏览器内置了许多处理表单验证的工具，包括可以独立完成大量工作的 HTML 属性，以及可以执行更多操作的 JavaScript API。Chris 甚至向我们展示了通过 稍微多一点的工作，我们可以将 IE 9 的支持降至最低，并获得理想的用户体验。

那么第三方表单验证库有什么作用呢？为什么你需要为免费的东西使用库呢？

你需要更广泛的浏览器支持。

所有“现代”浏览器 + IE 9 及以下版本都非常好，尤其是在您很好地解决了跨浏览器差异的情况下 就像 Chris 所做的那样。但是，您可能需要更深入地支持。

像 Parsley 这样的库可以进一步降低到 IE 8。

您正在使用一个不希望您手动操作 DOM 的 JavaScript 框架。

当您使用 React 等框架时，您实际上根本不会手动附加事件处理程序或将任何内容插入 DOM。您可能正在通过 props 将值传递给表单元素，并在 state 中设置错误数据。

您可以使用原生表单验证和原生约束验证来完成所有这些操作，但这也解释了为什么您可能需要使用为此设计的附加组件。您可能会使用像 react-validation 这样的包来帮助您解决这个问题。或者 Formik，它似乎就是为这类事情而构建的。

同样，还有

• angular-form-validation 或 angular-validation 用于 Angular
• ember-form-validation 用于 Ember
• vee-validate 用于 Vue

希望这些库都很轻量级，因为它们可以在可能的情况下利用原生 API。当您需要使用这类工具时，我会留给您去研究。

您被 API 所吸引。

任何框架获得成功的主要原因之一就是 API 的友好性。如果它使您的代码易于理解和使用，那就非常重要。

有时最好的 JavaScript API 从用于激活和配置的 HTML 属性开始。请记住，原生 HTML 约束验证 完全是关于 HTML 属性 控制表单验证的，因此理想情况下，任何第三方表单验证库都应本着渐进增强精神使用它们。

您被集成所吸引。

他们承诺您“与 Bootstrap 兼容！”，而您的项目正在使用 Bootstrap，因此这似乎是一个不错的选择。我明白，但这是我最不喜欢的理由。在这种情况下，Bootstrap 唯一关心的就是一些类名以及您放置 div 的位置。

它验证的内容超出了浏览器的范围。

浏览器可以验证电子邮件地址是否在技术上有效，但不能验证它是否可以弹回。浏览器可以验证邮政编码是否看起来像真实的邮政编码，但不能验证它是否实际存在。浏览器可以验证 URL 是否为正确的 URL，但不能验证它是否可以解析。第三方库可能可以执行此类操作。

您被花哨的功能所吸引。

• 也许该库提供了一个功能，当出现错误时，它会将表单滚动到第一个错误。
• 也许该库提供了一个验证码功能，这是一个与表单验证相关的概念，并且您需要它。
• 也许该库提供了一个您喜欢的事件系统。它在表单上发生某些事情时发布事件，这对您很有用。
• 也许该库不仅验证表单，还创建所有错误的摘要以显示给用户。

这些内容略高于简单的表单验证。您可以使用原生验证来完成所有这些操作，但我可以理解这将如何推动第三方库的采用。

你需要翻译。

原生浏览器验证消息（与 HTML 属性一起提供的默认消息）使用浏览器本身的语言。因此，Firefox 的法语版本会输出法语消息，而不管页面本身的语言如何。

第三方表单验证库可以附带语言包来解决此问题。FormValidation 就是一个例子。

结论

我并不推荐使用表单验证库。事实上，如果有什么不同的话，那就是相反的。

我认为，随着浏览器支持和原生 API 的用户体验越来越好，第三方表单验证库将会逐渐减少。

或者（我想很多库已经这样做了），它们会在内部越来越多地使用原生 API，然后在验证本身之上提供不错的功能。