element必填校验 输入空格问题，修改正则表达式、请求拦截器，实现所有输入框去除首尾空格

一、element-ui,必填校验输入空格是可以通过校验的？

我们可以看一下elemen-ui的源码，

我们可以看到其实element-ui对应el-form-item关于必填校验的部分是采用了rules,rules.length去进行的校验 我们需要知道的是其实空格也同样算是一个字符。同样的空格那么肯定是会通过校验的，那么我们如何去实现不让其首尾输入空格呢？

二、解决方案?v-model.trim修饰符?

当然我们第一个想法想到的肯定是trim这个修饰符，首先我们可以看一下官网

我们可以试一试，当input新增了trim后会出现怎样的效果?

如果采用trim修饰符的话，确实可以实现功能，但是这个时候首尾都不能输入空格就会导致一个问题，当我们从左到右输入文字的时候
例如

1111   2222

我如果想写完1111立刻再输入几个空格再输入2222，这个时候如果我们采用的是trim便会遇到不能输入的问题，我们只能11112222输入完成之后再去讲鼠标光标放置在11112222中间部分输入空格，这样肯定是不利于我们输入的。

三、采用pattern，手写正则的方式实现功能功能。

我们只需要在我们对应的rules数组对象校验中新增这样一个正则写法即可。

pattern: ‘[^ \x20]+’

完整写法

loginRules: {
   
   
        username: [{
   
    required: true, pattern: '[^ \x20]+', trigger: 'blur', message: '用户名不能为空' }],
        password: [{
   
    required: true, pattern: '[