不该该被滥用的 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