html 的标签属性
type 输入类型
用于限制输入类型，我们这里只介绍我们有可能会有到的。每个 type 往往会带有一些特性，我们来看一下吧。
date输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
datetime-local输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
email编辑邮箱地址的区域。类似text输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
number用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
password单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
search用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
tel用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
text默认值。单行的文本区域，输入中的换行会被自动去除。
url用于输入 URL 的控件。类似text输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。
可以看到里面支持功能最多的就是动态键盘和验证，恰好这两个功能都是我们需要的。
pattern、min、max、minlength、maxlength 这些属性其实都是针对于特定的 type 。（这点没想到吧，好了，我们看下去）
pattern
只支持 type 为 password, text, tel。
检查控件值的正则表达式。pattern 必须匹配整个值，而不仅仅是某些子集。
min、max
只支持 type 为 number。
这个属性指明了用户（最小、最大）（数字或日期时间）可以输入的值
minlength、maxlength
只支持 type 为 password、 search、 tel、 text、 url。
这个属性指明了用户（最少、最多）可以输入的字符个数（按照Unicode编码方式计数）
如何获取校验状态
可以看到，上面有一些校验相关的内容，我们如何使用他呢？
- css 方法：
:valid、:invalid
- html 方法：
表单提交的时候
- js 方法：
ValidityState
获取输入的内容
好像没有比这个更简单的了，比较我们每天都在使用。
原生：el.value
Vue：v-model
但是事情没有这么简单，如果使用了html的检验，如果校验没有通过，获取的是空串
测试
type="number" 时，无法获取多余的.
type="number" 时，异常value无法获取
通过 validationMessage 和 validity 来获取当前异常的状态
