HTML5的表单验证

几个月前桑迪普向我们介绍了HTML约束的API ，展示我们如何使用新的HTML5输入类型和属性来验证我们的表格中以最小的Javascript的浏览器。 今天我将带领您通过使用约束的API验证一个简单的预订表格，并随时留意你如何能确保你的形式停留访问过。

总括来说，或者如果你没有看过桑迪普的文章，使用HTML5的曙光，新的输入类型和属性的木筏加入标签，让浏览器自己来完成客户端验证我们：没有需要的Javascript。 要开始使用新的输入类型和属性，你并不真正需要做的任何东西比开始使用新的输入类型和属性等。

严格来说，你应该确保你使用了HTML5的DOCTYPE，否则你会碰到的HTML验证错误。 但关于他们的伟大的事情是，他们都降低正常。 所以，如果旧的浏览器不支持他们，事实上，他们是在HTML不会“破”什么，他们就会被渲染为一个 。

注：虽然客户端表单验证是伟大的增强的用户体验快速，即时反馈给用户未做往返于服务器，你仍然需要在服务器上验证提交的任何数据了。

让我们看一下我们如何可以只使用内置的验证浏览器的验证表单的例子。 就拿这个简单的预订表格：

  
 
Booking Details
 
 Name (required):  Format: firstname lastname 
 
 Email (required):  
 
 Website:  
 
 No. of Tickets (required):  
 
  
 
 

http://jsfiddle.net/ianoxley/aZ9r8/1/

请注意，每个输入域都有一个关联标签。 在for属性标签标记匹配了相关的输入标签的id属性。 这样可以使我们的HTML语义，与标签帮助到输入控件赋予意义。 这也意味着，如果您按一下标签，相关的输入标签接收的焦点。

他们还帮助可访问性，如在标签中的文本将被读出到屏幕阅读器用户：因此，它可以是有用的，加入'需要'的标签文本，如我上面做的必填项。

我还使用了WAI ARIA aria-describedby属性，它可以帮助用户通知的格式中，他们应该进入他们的名字。

 Name (required):  Format: firstname lastname

这表现在它所描述的输入域获得焦点时，提供上下文相关的帮助：

 .help { display:none; font-size:90%; } input:focus + .help { display:inline-block; }

为了验证这种形式，我们将需要：

1. 确保所需的字段已经完成
2. 确保为'名'是怎么输入的名字一样
3. 确保电子邮件地址看起来像一个电子邮件地址
4. 检查，如果一个网站的网址已经提供，它看起来像一个网址
5. 确保一个数字在'门票数量“中输入

必填字段

验证所需的字段是由于添加容易required的属性给每个 ，必须完成，即姓名，电子邮件，以及门票的数量标记。 例如，名称现在看起来像这样：

 
 Name:  Format: firstname lastname 

如果我们试图立即提交此表没有完成任何所需的字段，浏览器会通知我们：

你有没有注意到如何，我们不再有“必要”必填字段标签了吗？ 这是因为大多数屏幕阅读器会拿起required现在的属性，所以如果我们离开'需要'的标签，标签的屏幕阅读器用户将有“必要”读给他们两次，他们可以找到相当恼人。

一个字的警告，虽然：不是所有的浏览器都实现了required属性通俗易懂，所以它可能无法正确地拾起在某些浏览器/屏幕阅读器的组合。 因此，当前的最佳实践建议补充的咏叹调，需要=“true”属性所要求的属性：

验证数据

现在，我们的用户得到提示来完成必填字段，我们需要确保他们提交的数据是我们所需要的格式。

我们会想“名称”字段中提交格式为“名字姓'，并且只能包含字母和一个空格（ 注意在现实世界的场景，你可能需要考虑其他的语言环境-这个例子中一直保持简单的故意）。 我们可以通过添加一个pattern属性的“名称”字段中，设置它的值为正则表达式我们想要的数据进行比较，对实现这一目标：

当使用该模式属性， ^和$的正则表达式的开始和结束都是隐含的，不需要被包括在内。

你可以帮助用户通过包括title属性，告诉他们你所需要的格式：

在title属性中的文本被附加到内置的验证消息：

请注意，某些屏幕阅读器/浏览器组合，可能导致被读出，除了咏叹调 - describedby文本的title属性，所以注意这一点，例如我发现，使用NVDA与IE10引起的title属性和咏叹调 - describedby元素的文本被读出，但使用NVDA与Chrome和Firefox并没有表现出这种行为。 只有ARIA-describedby文本被读取。 稍后我们将重新审视这一点，并使用CSS3告诉你一个解决方案。

验证邮件，URL和数字

为了确保我们的用户在电子邮件，网站，门票字段数正确的数据，我们可以使用一些HTML5中添加新的输入类型：

  …  … 

通过指定适当的类型，我们的浏览器将验证数据对我们来说，并确保我们已经有了在电子邮件领域，在该领域的网站的URL，以及一些在现场门票的数量的电子邮件地址。

还要注意的是type属性不再是必需的属性本身。 如果你不指定它的input变量将被隐式的type="text" 。

假设我们要限制的门票每个人能买多少？ 我们可以通过使用这样做max和min的属性：

如果用户输入任何小于1或大于4，他们会被提示在允许的范围内输入一个数字。

使用CSS突出必填字段和无效数据

为配合由HTML5提供的新的输入类型和属性，CSS3给了我们一些新的伪类，我们可以用它来提供视觉线索的用户在哪个表单域是必需的，哪些是可选的，并且包含验证错误。

必填字段可以使用:required伪类：

 input:required { background:hsl(180, 50%, 90%); border:1px solid #999; }

可选字段可以使用:optional伪类：

 input:optional { background:hsl(300, 50%, 90%); border:1px dotted hsl(180, 50%, 90%); }

表单验证成功或失败可以通过使用以下方式表示给用户:valid ， :invalid ， :in-range和:out-of-range伪类：

 input:valid, input:in-range { background:hsl(120, 50%, 90%); border-color:hsl(120, 50%, 50%); } input:invalid, input:out-of-range { border-color:hsl(0, 50%, 50%); background:hsl(0, 50%, 90%); }

还记得前面我提到的某些屏幕阅读器/浏览器组合可导致大声除了正在读的title属性aria-describedby元素的文本？ 那么，围绕这一方法是从输入元素去掉标题属性，并利用CSS3的:invalid伪类，以显示aria-describedby文字：

 input:focus + .help, input:invalid + .help { display:inline-block; }

现在，除了显示在输入字段接收焦点的说明文字中，我们还会显示帮助信息，当输入字段的值是无效的。

使所有这些更改之后我们的HTML现在看起来像这样：

  
 
Booking Details
 
 Name:  Format: firstname lastname 
 
 Email:  
 
 Website:  
 
 No. of Tickets:  
 
  
 
 

http://jsfiddle.net/ianoxley/VY8KU/

禁用浏览器的验证

您可以禁用内置的浏览器验证通过添加一个novalidate属性到你标签：

  … 

http://jsfiddle.net/ianoxley/9C2JD/

跨浏览器？

好消息是， HTML表单验证是支持所有最新的桌面浏览器，和大多数移动浏览器。 坏消息是，它是只在Safari部分支持，并且不支持在所有iOS上的Safari浏览器，或者默认的Android浏览器。 如果你需要支持以前老版本的IE来IE10你不会找到任何这些支持表单验证两种。

所以，你可以做什么，如果你要支持不具备的表单验证还支持浏览器？

一种选择是什么也不做，只依靠你的服务器端验证。 这就需要对部件进行额外的工作，但会在UX对于那些使用不支持的浏览器是令人满意的？

另一种选择是继续使用的Javascript只为您的客户端验证，并且不添加任何上面讨论的新功能。

第三种方法是使用Javascript来检测浏览器是否支持表单验证，使用它，如果确实如此，并回落到基于Javascript的验证，如果它没有。 库如的Modernizr可以帮助HTML5特性检测，但你总是可以编写自己的代码，如果你不希望包含另一个Javascript库：

 // Without Moderizr var inputElem = document.createElement('input'); if (!('required' in inputElem)) { // Javascript form validation } ... // With Modernizr if (!Modernizr.input.required) { // Javascript form validation }

结论

在这篇文章中，我们已经通过应用HTML5的表单验证的预订表格，客户端，而无需使用任何Javascript走，并指出了一些可访问性问题警惕的。

然后，我们看着新的CSS3伪类可以如何用来给视觉线索，以用户为需要哪些字段和选项，其中包含有效的或无效的数据。

最后，我们介绍了如何禁用HTML表单验证，并检测表单验证是否可用或不可的情况下，我们必须支持的浏览器尚未支持此功能。

让我知道你怎么想的这一切中的注释。