不应该被滥用的 input 属性

前两天接到了一个需求：手机号、身份证、验证码 需要校验，检验规则包括长度、内容。

想法是有一堆，但是不知道好使不好使，我们今天来整理一下咯。先来说说都有什么想法

1. html 的标签属性

   1. type
   2. pattern
   3. min、max
   4. minlength、maxlength

2. js 的事件监听

   1. value 获取值（vue 使用 v-model）
   2. @input 监听改变

接下来就是我们大家都很期待的理想很丰满，现实很骨感环节。

html 的标签属性

type 输入类型

用于限制输入类型，我们这里只介绍我们有可能会有到的。每个 type 往往会带有一些特性，我们来看一下吧。

1. date 输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
2. datetime-local 输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
3. email 编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
4. number 用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
5. password 单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
6. search 用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
7. tel 用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
8. text 默认值。单行的文本区域，输入中的换行会被自动去除。
9. url 用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。

可以看到里面支持功能最多的就是动态键盘和验证，恰好这两个功能都是我们需要的。

pattern、min、max、minlength、maxlength 这些属性其实都是针对于特定的 type 。（这点没想到吧，好了，我们看下去）

测试地址：https://www.lilnong.top/static/html/sf-1190000037538101-html-input-attribute-type-pattern-min-max-minlength-maxlength.html

pattern

只支持 type 为 password, text, tel。
检查控件值的正则表达式。pattern 必须匹配整个值，而不仅仅是某些子集。

min、max

只支持 type 为 number。
这个属性指明了用户（最小、最大）（数字或日期时间）可以输入的值

minlength、maxlength

只支持 type 为 password、 search、 tel、 text、 url。
这个属性指明了用户（最少、最多）可以输入的字符个数（按照Unicode编码方式计数）

如何获取校验状态

可以看到，上面有一些校验相关的内容，我们如何使用他呢？

1. css 方法：
   :valid、:invalid
2. html 方法：
   表单提交的时候
3. js 方法：
   ValidityState

获取输入的内容

好像没有比这个更简单的了，比较我们每天都在使用。

原生：el.value
Vue：v-model

但是事情没有这么简单，如果使用了html的检验，如果校验没有通过，获取的是空串

测试

type="number" 时，无法获取多余的.

type="number" 时，异常value无法获取

通过 validationMessage 和 validity 来获取当前异常的状态

微信公众号：前端linong

欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。

参考资料

1. MDN <input>：输入（表单输入）元素
2. ValidityState