本节书摘来自异步社区《HTML5实战》一书中的第2章，第2.4节，作者： 【美】Rob Crowther , Joe Lennon , Ash Blue , Grey Wanish 更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.4 利用约束验证API来检查表单输入数据
本章开始时曾介绍过一些HTML5的新验证特性——required、pattern、min和max这些属性。通过使用这些属性，无需借助任何额外的JavaScript脚本，浏览器自身就可以验证表单输入字段的数据。然而，这些属性仅仅才是HTML5验证功能中的小角色而已，约束验证API才是主角。
本节主要内容
- 如何使用validation属性和方法来设置自定义的验证测试。
- 如何使用invalid事件来侦测已提交表单中的无效字段。
- 如何使用CSS3中新增的伪类选择器为无效字段应用样式，而无需在输入元素中假如过多的类名。
约束验证API所提供的方法与属性可以对指定元素的有效性进行侦测与修改。借助它可以实现其他的验证功能，并且还可以使用自定义的错误消息提示。可以侦测到字段是否存在错误，如果有错误，还可以侦测出错误类型以及要显示的错误消息提示。它还可以让我们自己来设置自定义验证消息，能够被浏览器原生显示出来。
本节将继续开发我们的订单应用，接下来的内容分为两步。
- 第1步：为输入元素添加自定义验证与自定义错误消息提示。
- 第2步：侦测表单验证失败事件。
尽管本书已经为该例提供了一个完整的CSS文件，你完全可以不必自己动手编码，但在本节最后，我们将介绍如何利用CSS3进行无效元素的样式，以便你将来能把这一点也用到自己开发的应用中。首先讨论一下约束验证API的属性与方法。
2.4.1 利用setCustomValidity方法和ValidationMessage属性创建自定义验证测试和错误消息
当浏览器或HTML5不支持验证功能时，应用就只好采用自定义验证测试。这种情况下，需要借助JavaScript来验证输入数据的有效性，并在验证失败时提供自定义错误消息提示。约束验证API所提供的setCustomValidity方法和validationMessage属性简化了自定义错误消息提示的实现。两种构建都允许应用将错误消息提示赋予< input >元素的validationMessage属性。具体采用哪种构建，则要跟据浏览器对setCustomValidity的支持来判断。第1步：为输入字段加入自定义验证与错误消息提示
订单应用将利用setCustomValidity方法来执行自定义验证。- 用户全名长度必须至少4个字符。
- 密码长度必须至少8个字符。
- “设置密码”与“密码确认”内填入的数据必须一致。
- 信用卡号的长度必须至少4个字符。
接下来就为app.js加入这种自定义验证，将代码清单2-11所示的代码加到init函数的末尾，紧跟在对qtyListeners的调用的后面。
https://yqfile.alicdn.com/1e58d438b8b458fb454002cfd20f3cad5af6eceb.png" >
试试看
如果你用兼容浏览器来打开订单页面，试着打破此前所说的自定义验证规则，那么自定义错误消息提示就会出现，如图2-10所示。
接下来将使用invalid事件，当用户提交的页面中带有一个或更多的字段被标为无效时，该事件就会被触发。
2.4.2 利用invalid事件来侦测失败的表单验证
当用户试图提交一个使用了HTML5验证特性的表单时，只有当整个表单完全通过验证测试，submit事件才会触发。如果你需要侦测表单验证何时出问题，可以侦听新的invalid事件，该事件触发的条件只有以下两种。- 用户试图提交表单，但验证失败。
- checkValidity方法已经被应用调用过，且返回false。
第2步：侦测订单验证失败
为表单的invalid事件添加一个侦听器，将代码清单2-12所示的代码加入上一节所完成的代码后面。
如果想为已提交表单中的错误表单字段添加一种样式，那么invalid事件就很有用了。下面就来学习它。
**
2.4.3 利用CSS3伪类来设置无效元素的样式**
要想设置无效元素的样式，可以在迭代验证各个字段。一旦发现无效字段，就在该字段上应用CSS类。但这种方法太笨了，稍微用一下CSS3的一些技巧，你完全可以更简洁地实现它。CSS3引入了一些新的伪类，可以根据验证结果来设置表单字段的样式。只有当伪类为真时，这些样式才会被应用。下面这些伪类作用显而易见：
- :valid
- :invalid
- :in-range
- :out-of-range
- :required
- :optional
你可能会猜到，伪类简化了无效字段的样式设置工作。例如，对于由约束验证API宣布为无效的元素，下面的代码会用淡红色的背景和栗色边界框来设置它们的样式。
https://yqfile.alicdn.com/450934cb01a997945eae19dff785c9dea0a89b43.png" >
但这种声明也存在一个问题：订单页面刚加载时，各字段是空的。所以对于那些使用required或pattern验证属性的字段来说，一开始就是无效的，所以那些添加了验证属性的字段，就会都显示出亮红色背景和栗色边框，这太难看了。
幸好，这个问题解决起来并不难，当invalid事件已经触发，给父级表单添加一个类，并且为应用到表单中的输入元素及选择器元素的CSS规则中添加伪类选择器:invalid。
注意 不要改变在本章刚开始时加入应用目录的CSS文件。本节将逐步介绍理论上你可能会采取的改变，而不是让你真的去修改它们。
上一节中，你为父级表单添加了一个类，现在，在CSS中添加一个伪类选择器:invalid。
https://yqfile.alicdn.com/6a15ea7314b5fe70745e290504c3446343f272c0.png" >
另外，订单还用:required伪类选择器来为带有required属性的字段设置一种淡黄色背景的样式：
https://yqfile.alicdn.com/e4b9067c836f84254511e2316e7656b36aad559e.png" >
带有required属性的字段与无效字段的样式如图2-11所示。
https://yqfile.alicdn.com/01fdbdb9da47daab60764d8270201eaddbfc5d82.png" >
截止目前，对于大多数现今的浏览器而言（除了Safari之外），表单的功能基本上都可以用了。下一节将介绍如何使用Modernizr库来实现绝对可靠的特性侦测，以及如何使用polyfill来填补特性上的空白。
