关于el-form el-form-item el-input校验通过和校验不通过动态切换样式

最近做的一个需求，首页是一个form表单+input框组成， input框下方带有小提示，问题来了，当输入内容校验报错，报错提示和需求小提示就冲突了。为了版面的美观，有了如下解决方案：

1. 首先提示只能存在1个， 小提示或者报错提示，给小提示添加动态样式tip-style1，样式根据需求写

 <el-form-item>
            <div :class="{ 'tip-style1': !isVpcRule }" style="color: #999; line-height: 15px">
              <i class="el-icon-warning-outline" style="color: #999"></i>
              你是我的小啊小苹果！
            </div>
          </el-form-item>

2. 判断某个字段是否通过校验validateField， 设置标志位isVpcRule

 private vpcRule() {
    this.applyFormRef.validateField('vpcId', errMsg => {
      if (errMsg) {
        this.isVpcRule = true
      } else {
        this.isVpcRule = false
      }
    })
  }

3. 在change和提交表单的时候调用方法

 private async submitApply() {
    this.applyFormRef.validate(async valid => {
      if (!valid) {
        this.vpcRule()
      }
      if (valid) {
        try {
          await submitApply({
            ...this.applyForm,
          })

总结： 通过设置是否校验通过的标志位，动态展示输入框样式！
重点： validateField-----校验某个字段是否通过校验