聊一聊实际项目中输入框的校验的几种优化方案

前言

表单控件，可以说是在前端所有控件中的绝对的基石之一，几乎任何网站都逃脱不了增、删、改、查这个四个基础接口，而为了实现这四个接口对应的功能，在前端几乎必不可少的就是需要输入框来做一些数据的输入和选择 ，比如新增用户时的用户名、密码、地址等等，而为了验证输入信息的有效性，自然就有了对输入信息的校验；
​
有的小伙伴可能会说，信息的校验不应该是后台在做吗？确实是，不可否认的是后台确实需要做信息的校验，但是如果验证仅仅是在后端做，那么是不是在体验上会有很大的问题，比如：用户名，用户名仅允许数字加字母，如果仅仅是这种验证就需要发送到后台去验证一下，那也太不科学了，而且万一网络不好，或者一些其他原因接口返回的比较慢，那用户体验就会非常差，因此，不可避免的前台也需要做校验， 你想，如果用户输入的内容不合法，在下一秒就可以直接得到错误反馈，那么是不是在体验上就得到了大幅的提升…
​
先看一下基础用法，也是现在非常绝大多数基于UI框架采用的方式

基础用法
我们项目中的UI框架基本都是使用的IView，其实包括ElemenUI在内的这两者的表单验证都是使用的async-validator，先看一下IView官网的例子，

<template>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label=&#