Learn HTML & CSS表单验证
表单收集的是人填写的信息，而人难免会漏填字段、把邮箱地址打错、或者在该填数字的地方填上字母。你肯定不希望这些未经检查的数据原封不动地传到你的代码里。在提交之前，浏览器其实可以帮你检查很多东西——前提是你得把每个字段的要求写清楚。这个说明就写在 HTML 里，本章要讲的正是怎么写。
必填字段和输入类型
最省事的两种检查，一是声明某个字段必须填写，二是声明这个字段应该填什么类型的值。
给 input 加上 required 这个词，浏览器就会在字段为空时拒绝提交表单。你不需要写任何代码来实现这一点，这个属性本身就是指令。
<input type="text" name="full_name" required>另一半是 type 属性。它告诉浏览器这个值应该是什么形式，浏览器会替你检查。用 type="email"，浏览器就会确保这个值看起来像个邮箱地址；用 type="number"，它就只接受数字。此外还有专门用于日期、网址等的类型。
可以把它想象成医院里的一张表格：有些框旁边标着“必须填写”，日期那一栏已经分好了日、月、年的小格子。纸张本身就已经告诉你该往哪里填什么了。
下面是一个同时用到这两个属性的简单注册表单：
<form>
<label>
Email address
<input type="email" name="email" required>
</label>
<label>
Website
<input type="url" name="website">
</label>
<button>Sign up</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="Two letters, a hyphen, three digits, e.g. AB-123"
required
>maxlength 限定能输入多少个字符，min 和 max 圈住一个数字的范围。浏览器会自动把用户限制在这些范围内，这是一大堆你根本不用写的检查代码。 浏览器原生的验证反馈
声明规则只是故事的一半，另一半是当某个值不符合规则时，用户实际看到了什么。
当用户按下提交按钮、而某个字段有问题时，浏览器会阻止提交，并在第一个出问题的字段旁边显示一条小提示，然后把光标跳到那里。这条提示不需要你来写，浏览器会用访问者自己的语言自动生成并显示出来。
所以一个空着的 required 邮箱字段会弹出类似“请填写此字段”的提示，表单在问题解决之前不会发送出去。
什么时候还是离不开 JavaScript
原生验证检查的是单个字段自身的规则。而不少实际场景中的检查根本不是这种形状，这时候就该轮到 JavaScript 出场了。
有些事情浏览器自己没办法检查：两个密码字段是不是一致，某个用户名是不是已经被别人占用了，某个优惠码是不是真实存在。这些都不是单个字段形式对不对的问题，所以也没有对应的属性能处理，这时候就得靠 JavaScript 来做检查。
这不是 HTML 的短板。内置检查免费搞定了常见的场景，剩下的那些交给 JavaScript 处理。