掌握HTML5：约束验证

一分耕耘，一分收获！既然打开了这篇文章《掌握HTML5：约束验证》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

HTML5 给我们带来了很多非常好的优势。除了统一错误模型、引入新语义标签或简化文档类型等常见问题之外，最大的改进之一是表单的约束验证。如果没有表单，网络会是什么样子？

约束验证试图提高 Web 表单的可用性。浏览器可以直接告知用户无效值的可能性，而不是将表单发送到服务器，然后将其评估为无效，返回到客户端并最终由用户进行调整。这不仅减少了网络通信，还提高了页面的可用性。

需要注意的是，约束验证不能取代服务器端验证。此外，基于 JavaScript 的解决方案可能仍然有用。一般来说，我们总是必须实现服务器端验证。如果我们使用良好的架构，服务器上的模型约束将自动反映在传输的 HTML 代码中。这样我们就可以免费获得约束验证。现在我们可以使用 JavaScript 进一步增强体验，它既可以充当约束验证的补充，也可以充当填充。

我们将从非验证表单开始我们的旅程。然后我们将集成一个基于 JavaScript 的解决方案。最后介绍一下HTML5的约束验证。在最后一节中，我们将了解可能遇到的跨浏览器奇怪现象。

非验证表单提交

最经典的 HTML 表单版本是不带有任何客户端验证逻辑的版本。我们只需要提供一个标准的形式，不需要任何特殊的属性。正如简介中已经指出的，我们需要始终特别注意这种表单提交。

尽管我们确实希望保护客户端上已经存在的表单，但我们永远无法确定所提交数据的状态。保护和增强服务器上的表单验证的技术很大程度上取决于所使用的编程框架和语言。因此我们将跳过这样的讨论。相反，我们现在将讨论一般的表单提交。

在《精通HTML5》系列的第二部分中我们已经提到了表单编码类型的重要性。我们还研究了三种成熟的编码类型。剩下的问题是：这些价值观实际上是如何建立的？浏览器的确切行为取决于为 patternMismatch。

结论

约束验证使我们能够为用户（即使禁用了 JavaScript）提供有关当前表单状态的即时反馈。我们不必为了显示错误消息而浪费往返服务器的网络带宽。尽管如此，我们应该始终记住，表单提交通常是可以的。因此，在服务器端进行一些验证是不可避免的。

约束验证带来的可能性几乎是无限的。我们可以使用客户端验证来确保满足正则表达式，考虑日期和数字的有效范围，并选中某些复选框。我们还可以使用 JavaScript 扩展可用的检查。

参考文献

• MDN：约束验证
• W3C：限制和表单提交
• Raymond Camden：HTML5 表单验证 – 约束验证 API
• Tomomi Imura - HTML5 输入事件处理程序和用户体验
• TJ VanToll - 约束验证：Web 表单的本机客户端验证

理论要掌握，实操不能落！以上关于《掌握HTML5：约束验证》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！