帮助用户在表单中输入正确的数据

使用内容集保持井井有条 根据您的偏好保存内容并对其进行分类。

浏览器具有内置的验证功能，可以检查用户是否以正确的格式输入了数据。您可以通过使用正确的元素和属性来激活这些功能。最重要的是，您可以使用 CSS 和 JavaScript 增强表单验证。

为什么要验证您的表单？

您在上一模块中学习了如何帮助用户避免在表单中反复重新输入信息。您如何帮助用户输入有效数据？

填写表单时，如果不知道哪些字段是必填字段，或者不知道这些字段的约束条件，这会让人感到沮丧。例如，您输入用户名并提交表单，结果却发现用户名必须至少包含八个字符。

您可以通过定义验证规则并进行沟通来帮助用户。

帮助用户避免意外遗漏必填字段

您可以使用 HTML 来指定在表单中输入的数据的正确格式和约束条件。您还需要指定哪些字段是必填字段。

尝试在不输入任何数据的情况下提交此表单。您是否看到附加到 <input> 的错误消息，告诉您该字段是必填项？

发生这种情况是因为使用了 required 属性。

<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">

您已经了解到可以使用更多类型，例如 type="email"。让我们看一下必填的电子邮件 <input>。

尝试在不输入任何数据的情况下提交此表单。与之前的演示有什么不同吗？现在在电子邮件字段中插入您的姓名并尝试提交。您会看到不同的错误消息。这怎么可能？您收到不同的消息是因为您输入的值不是有效的电子邮件地址。

required 属性告诉浏览器该字段是必填字段。浏览器还会测试输入的数据是否与 type 的格式匹配。只有当示例中显示的电子邮件字段不为空且输入的数据是有效的电子邮件地址时，该字段才有效。

帮助用户输入正确的格式

您学习了如何使字段成为必填字段。您将如何指示浏览器用户必须为表单字段输入至少八个字符？

试用一下演示。更改后，如果您输入的字符少于八个，则应该无法提交表单。

<label for="password">Password (required)</label>
<input required="" minlength="8" type="password" id="password" name="password">

沟通您的验证规则

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
  name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>

确保所有用户都理解您的验证规则。为此，请将表单控件与解释规则的元素连接起来。为此，请将 aria-describedby 属性添加到具有表单 id 的元素。

Pattern 属性

有时您想要定义更高级的验证规则。同样，您可以使用 HTML 属性。它被称为 pattern，您可以将正则表达式定义为值。

<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">

在这里，只允许使用小写字母；用户必须输入至少两个字符，且不超过二十个字符。

您将如何更改 pattern 以也允许使用大写字母？试用一下。

添加样式

您现在已经学习了如何在 HTML 中添加验证。如果您还可以根据验证状态设置表单控件的样式，那不是很好吗？这可以通过 CSS 实现。

如何设置必填表单字段的样式

在用户与您的表单交互之前，向用户显示字段是必填字段。

您可以使用 :required CSS 伪类来设置 required 字段的样式。

input:required {
  border: 2px solid;
}

设置无效表单控件的样式

您还记得如果用户输入的数据无效会发生什么吗？附加到表单控件的错误消息会出现。当发生这种情况时，是否可以调整元素的外观？

您可以使用 :invalid 伪类向无效的表单控件添加样式。此外，还有 :valid 伪类，用于设置有效表单元素的样式。

还有更多方法可以根据验证调整您的样式。在有关 CSS 的模块中，您将了解更多关于表单样式设置的信息。

使用 JavaScript 进行验证

为了进一步增强表单的验证，您可以使用 JavaScript Constraint Validation API。

提供有意义的错误消息

您之前了解到，错误消息在每个浏览器中并不相同。如何向所有人显示相同的消息？

为了实现这一点，请使用 Constraint Validation API 的 setCustomValidity() 方法。让我们看看它是如何工作的。

const nameInput = document.querySelector('[name="name"]');

nameInput.addEventListener('invalid', () => {
    nameInput.setCustomValidity('Please enter your name.');
 });

查询您要设置自定义错误消息的元素。监听您定义的元素的 invalid 事件。在那里，您可以使用 setCustomValidity() 设置消息。此示例显示消息 Please enter your name.（如果输入无效）。

在不同的浏览器中打开演示，您应该在所有浏览器中看到相同的消息。现在，尝试删除 JavaScript 并再次尝试。您会再次看到默认错误消息。

您可以使用 Constraint Validation API 做更多的事情。您将在后面的模块中详细了解如何使用 JavaScript 进行验证。

如何实时验证 您可以通过监听表单控件的 onblur 事件，并在用户离开表单字段时立即验证输入，从而在 JavaScript 中添加实时验证。

单击 演示中的表单字段，输入“web”，然后单击页面上的其他位置。您会在表单字段下方看到 minlength 的本机错误消息。

在即将到来的模块中详细了解如何使用 JavaScript 实现实时验证，确保用户实时收到错误通知。

检查您的理解程度

测试您对验证表单的知识

资源

• 在提交表单后禁用付款按钮
• 添加 CSS 以使表单更好地工作