表单验证
表单收集来自用户的输入，而用户会留下空白字段、输入错误的电子邮件或在应该是数字的地方填入字母。你不希望这些数据未经检查就到达你的代码。在提交任何内容之前，浏览器可以为你检查其中大部分内容，但前提是你要描述每个字段需要什么。这个描述直接写在你的 HTML 中，本章就是关于如何写它的。
必填字段和输入类型
你可以添加的两个最简单的检查是说字段必须被填充，以及说什么样的值属于它。
向输入框添加 required 这个词，浏览器就会拒绝提交表单，直到该字段有内容为止。你不需要写任何代码来实现这个功能。该属性就是指令。
<input type="text" name="full_name" required>另一半是 type 属性。它告诉浏览器该值应该是什么样子，浏览器为你检查它。使用 type="email"，浏览器会确保该值看起来像电子邮件地址。使用 type="number"，它只接受数字。还有日期类型、网址类型等。
想象一下医生办公室的表格，其中某些框被标记为"必须填写"，日期框已经有了日、月、年的小格子。这张纸在你写任何东西之前告诉你什么放在哪里。
这是一个使用两个属性的小注册表单：
<form>
<label>
电子邮件地址
<input type="email" name="email" required>
</label>
<label>
网站
<input type="url" name="website">
</label>
<button>注册</button>
</form>电子邮件字段必须填写且必须看起来像电子邮件。网站字段是可选的，但如果有人输入任何内容，它必须看起来像网址。浏览器在按下按钮时检查两者。
required，浏览器就不会让空字段通过。设置 type，比如 email 或 number，它会检查值的形状是否正确。选择与字段匹配的类型，你就能获得免费的检查。 约束属性
除了"被填充"和"正确的类型"，你通常需要限制：至少这么长的值，不超过那么大的数字，特定格式的代码。一些属性可以覆盖这些。
你可以设置字段接受的限制。两个有用的开始：
<input type="text" name="username" maxlength="20">
<input type="number" name="quantity" min="1" max="10">maxlength="20" 在字段包含二十个字符后停止。min 和 max 设置允许的最小和最大数字。浏览器将人们限制在这些边界内，所以你不必自己检查它们。
节省最多困惑的规则：pattern 必须匹配整个值，而不仅仅是其一部分。
<input
type="text"
name="product_code"
pattern="[A-Z]{2}-[0-9]{3}"
title="两个字母，一个连字符，三个数字，例如 AB-123"
required>maxlength 限制可以输入多少字符，min 和 max 限制数字范围。浏览器自动将人们保留在这些界限内，这是你永远不必写的大量检查。 原生验证反馈
声明规则是故事的一半。另一半是当值违反规则时用户看到什么。
当有人按下提交按钮且字段有问题时，浏览器会停止提交，并在第一个有问题的字段旁显示一条小消息，然后将光标跳转到它。你不需要构建这条消息。浏览器写它，用访问者自己的语言，并自动显示它。
所以一个 required 电子邮件字段留空会产生类似"请填写此字段"的内容，表单在修复前不会发送。
仍需要 JavaScript 的时候
原生验证根据字段自己的规则检查一个字段。很多真实的检查不符合这个形式，那就是 JavaScript 派上用场的地方。
有些东西浏览器无法自己检查。两个密码字段是否相匹配。用户名是否已被其他人占用。折扣代码是否真实。这些都不是关于一个字段的形状，所以没有属性，你需要用 JavaScript 来做检查。
这不是 HTML 的失败。内置检查用无代码处理常见情况，JavaScript 处理其余情况。