使用HTML5约束API进行表单验证

钥匙要点

• > HTML5约束API通过允许开发人员避免使用JavaScript进行基本验证，从而简化了形式验证，从而使过程变得更加用户和开发人员友好。 可以通过为输入元素的类型属性（例如“电子邮件”或“ url”）使用适当的值来实现
基本验证。其他验证属性，例如模式，必需，最大长度，最小值和最大可用于实现基本约束。
>对于复杂的验证逻辑，HTML5约束API可用于执行客户端验证和显示错误消息。 API包含一个setCustomVality（）方法，该方法可用于将字段标记为有效或无效并显示自定义错误消息。
• >
对于许多开发人员来说，验证网络表格一直是一项痛苦的任务。在用户以及对开发人员友好的方式中执行客户端验证确实很难。此外，以令人愉悦的方式将验证错误告知用户是一项繁琐的任务。 HTML5约束验证API可帮助开发人员避免使用JavaScript进行简单验证。 对于复杂的验证逻辑，可用于执行客户端验证并非常容易地显示错误消息。在本教程中，我将为您概述HTML5约束验证API，并讨论如何在项目中使用它来创建更好的Web表单。 在进行进一步之前，请查看此兼容性图表，以确保您的浏览器支持哪些功能。请注意，尽管HTML5约束验证API提供了一种验证表单字段的绝佳方法，但必须始终进行服务器端验证。

基本约束验证

可以通过为输入元素的类型属性选择最合适的值来执行基本验证。例如，您可以通过编写以下HTML来验证电子邮件：

您可以通过编写以下标记来验证URL：

<span><span><span><input</span> type<span>=”email”</span> /></span>		//The field value must be an email</span>

通过使用电子邮件或URL作为类型的值 属性，自动添加约束，并在提交表单时自动验证字段。如果发生任何验证错误，浏览器还以非常用户友好的方式显示错误消息。 您还可以在表格中使用几种基于验证的属性。以下是可用于实现基本约束的一些属性：

<span><span><span><input</span> type<span>=”URL”</span> /></span>			// The field value must be a URL</span>

>

模式：模式属性用于指定正则表达式，并且字段值必须与此模式匹配。此属性可以与输入类型一起使用，例如文本，密码，电子邮件，URL，TEL和搜索。 例如，以下HTML摘要使用输入字段的模式属性。
1. 提交表单后，在输入字段上执行验证。结果，在这种情况下，像ABCD这样的值不会通过验证。

   <span><span><span><input</span> type<span>=”text”</span> pattern<span>=”[1-4]{5}”</span> /></span></span>

   必需：必需的属性表明必须为输入元素指定值。
2. 以上片段利用了所需的属性。如果您将字段留为空并尝试提交表格，则会发生验证错误。

   <span><span><span><input</span> type<span>=”email”</span> /></span>		//The field value must be an email</span>

   > maxLength：这是一个整数值，指定特定输入字段允许的最大字符数。
以上片段为输入字段增加了上限。在此输入元素中输入的值必须小于20个字符。
3. >

   <span><span><span><input</span> type<span>=”URL”</span> /></span>			// The field value must be a URL</span>

   > min＆max：正如名称所暗示的那样，最小和最大属性分别为输入元素指定下限和上限。

处理复杂约束

可以使用HTML5约束API轻松处理复杂验证逻辑。例如，您可以拥有密码字段和确认密码字段。您需要确保在提交时两个字段中的值相同。如果没有，则应向用户显示错误消息。实际上，使用HTML5约束API可以很容易地完成此操作。 首先，我们需要将Onchange侦听器附加到密码字段。以下片段显示HTML形式。

<span><span><span><input</span> type<span>=”email”</span> /></span>		//The field value must be an email</span>

由于将在所有字段均得到完全验证之前没有提交事件，因此实际上无法知道何时提交表格。这就是为什么我们对变更活动感兴趣的原因。每当触发更改事件时，我们都需要检查两个密码是否匹配。如果是，我们在输入元素（在这种情况下为密码字段）上调用setCustomVality（），用一个空字符串作为参数。 这意味着密码字段标记为有效，因此，当提交表单时，将没有验证错误。另一方面，如果我们发现密码在更改中不匹配 事件，我们将带有错误消息的setCustomVality（）称为参数。这意味着密码字段将被标记为无效的，并且当用户提交表单时将显示错误消息。 以下JavaScript实现了此逻辑：

<span><span><span><input</span> type<span>=”URL”</span> /></span>			// The field value must be a URL</span>

使用上述方法最好的部分是您不必担心如何向用户提供错误消息。您只需要使用适当的参数调用一个简单的方法 - setCustomVality（），并且将相应地显示错误消息。

结论

您可以使用HTML5约束验证API实现许多简单至高级的约束。 API提供了一套用于自定义验证过程的工具。我们刚刚讨论了API的一部分。 要了解CSS钩等更高级的概念，有效性状态在Mozilla查看本教程。

html5约束API的经常询问表单验证

的问题

> HTML5约束API是什么，为什么对于表单验证很重要？>

>约束API与传统的JavaScript验证方法有何不同？

>传统的JavaScript验证方法通常涉及为每个表单字段编写自定义代码。这可能很耗时且容易出错。另一方面，约束API提供了一组标准化的方法和属性，可用于验证表单字段。这可以使您的代码更加有效，更易于维护。

>我可以将约束API与所有类型的表单字段一起使用吗？

>可以将约束API与大多数类型的表单字段一起使用，包括文本字段，复选框，无线电按钮和选择菜单。但是，它可能无法与使用第三方库创建的某些类型的自定义表单字段或字段一起使用。

>如何自定义约束API显示的错误消息？提供了一种setVality方法，该方法允许您设置自定义错误消息。您可以将此方法与验证属性结合使用，以显示表单字段失败验证时的自定义错误消息。

>

>我可以使用约束API在服务器端上验证表单吗？约束API是客户端技术，这意味着它在用户的浏览器中运行。但是，您可以将其与服务器端验证方法结合使用，以提供更强大的验证解决方案。始终始终验证用户在服务器端上的输入，因为恶意用户可以绕过客户端验证。

>

>我如何使用约束API立即验证多个表单字段？ 🎜>约束API提供了一种校验值方法，可一次用来一次以形式验证所有字段。此方法返回一个布尔值，指示表单中的所有字段是否有效。

>

>我可以将约束API与使用html5表单元素创建的表单使用？

是的，约束API是设计的使用HTML5表单元素。它提供了一组方法和属性，可用于验证这些元素并确保用户输入符合某些标准。

>

>我如何使用约束API实时验证表单？ 🎜>约束API可以与JavaScript事件侦听器结合使用，以实时验证表单字段。例如，您可以使用输入事件每次用户键入其中验证一个字段。

>

>我可以使用约束API验证旧浏览器中的表单吗？

>约束API是HTML5的功能，因此可能不支持较旧的浏览器。但是，您可以使用功能检测来检查约束API是否可用，并提供后备验证方法。

>如何使用约束API在移动上下文中验证表单？

>约束API在移动设备上与在桌面浏览器上相同的方式工作。但是，您可能需要调整验证规则，以说明移动设备的不同输入方法和屏幕尺寸。

以上是使用HTML5约束API进行表单验证的详细内容。更多信息请关注PHP中文网其他相关文章！