浏览器内置了验证功能，可检查用户是否以正确的格式输入数据。 您可以使用正确的元素和属性启用这些功能。除此之外，您还可以使用 CSS 和 JavaScript 增强表单验证。
为什么要验证表单？
在上一单元中，您已了解了如何帮助用户避免在表单中反复重新输入信息。 如何帮助用户输入有效的数据？
如果不知道哪些字段是必填字段或这些字段的限制，真是令人不快。 例如，您输入了一个用户名并提交了一个表单，结果发现用户名必须至少包含八个字符。
您可以通过定义验证规则并传达给用户，帮助他们实现这一点。
帮助用户避免意外缺少必填字段
您可以使用 HTML 为您在表单中输入的数据指定正确的格式和限制条件。 您还需要指定哪些字段是必填字段。
请尽量在不输入任何数据的情况下提交此表单。
您是否看到 <input> 附有一条错误消息，提醒您此字段是必填字段？
这是由 required 属性造成的。
<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">
您已经学习了您可以使用更多类型，例如 type="email"。我们来看一个必须提供的电子邮件地址 (<input>)。
请尽量在不输入任何数据的情况下提交此表单。 与之前的演示有什么不同吗？ 现在，请在电子邮件字段中插入您的姓名，然后尝试提交。 您会看到其他错误消息。这怎么可能？ 您还会收到另外一条消息，因为您输入的值不是有效的电子邮件地址。
required 属性会告知浏览器此字段是必填字段。浏览器还会测试输入的数据是否与 type 的格式匹配。示例中显示的电子邮件地址字段仅在不为空且输入的数据是有效电子邮件地址时才有效。
帮助用户输入正确的格式
您学习了如何将字段设为必填字段。 您会如何指示浏览器用户必须在一个表单字段中输入至少 8 个字符？
不妨试用一下演示版。 完成更改后，如果您输入的字符少于 8 个，则应该不能提交表单。
<label for="password">Password (required)</label> <input required="" minlength="8" type="password" id="password" name="password">
该属性的名称为 minlength。将值设置为 8，并且您具有所需的验证规则。反之，请使用 maxlength。
传达验证规则
<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>
确保所有用户都了解您的验证规则。
为此，请将表单控件与用于说明规则的元素相关联。为此，请使用表单的 id 向元素添加 aria-describedby 属性。
图案属性
有时，您需要定义更高级的验证规则。同样，您也可以使用 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 以允许使用大写字母？
试试看。
正确答案是 pattern="[a-zA-Z]{2,20}"。
添加样式
至此，您已经学习了如何在 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 实现实时验证。
检查您的掌握程度
测试您对表单验证知识的掌握情况
您使用什么属性来强制启用表单控件？
requiredneededessentialobligatory您可以自行定义错误消息吗？
message HTML 属性。:invalid CSS 伪元素。可以提交具有 type="email" 和 required 属性的 <input>：