前两天接到了一个需要：手机号、身份证、验证码 须要校验，测验规定包含长度、内容。

想法是有一堆，然而不晓得好使不好使，咱们明天来整顿一下咯。先来说说都有什么想法

  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的测验，如果校验没有通过，获取的是空串

微信公众号：前端linong

欢送大家关注我的公众号。有疑难也能够加我的微信前端交换群。

参考资料

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