浏览器拥有内置验证功能，可检查用户输入的数据格式是否正确。 您可以使用正确的元素和属性来激活这些地图项。 此外，您还可以使用 CSS 和 JavaScript 增强表单验证。
为什么要验证表单？
在上一单元中，您学习了如何帮助用户避免反复 在表单中重新输入信息。 如何帮助用户输入有效的数据？
如果不知道需要填写哪些字段，填写表单就会很麻烦， 或这些字段的约束条件 例如，您输入用户名并提交表单，结果发现用户名必须至少包含 8 个字符。
您可以定义验证规则并传达相关规则，帮助用户了解相关情况。
帮助用户防止必填字段不小心缺失
您可以使用 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">
此处只能使用小写字母； 用户必须输入至少 2 个字符，不能超过 20 个字符。
如何更改 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。
提供有意义的错误消息
您之前已了解到，每个浏览器中的错误消息都不尽相同。 如何向所有人展示相同的广告内容？
为此，请使用
setCustomValidity()
Constraint Validation API 的方法。
下面我们来看看具体操作方式。
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>：