关于element-ui在form提交调用api后，错误提示使用el-form校验来显示错误的方法

采用js动态校验的方式实现使用el-form的校验处来展示错误信息

直接上代码

export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [{ required: true, message: '密码不能为空', trigger: 'change' }]
      }
    }
  },
  methods: {
    loginMethod () {
      this.$refs['loginForm'].validate(async valid => {
        try {
          if (!valid) return false
          
          let loginData = await request('/login')
        } catch (err) {
          this.$refs['loginForm'].clearValidate()

          // 手动操作校验、展示登录错误信息
          this.rules.password.push({ // js新增一个自定义校验
            validator: (rule, value, callback) => {
              callback(new Error(err.message ? err.message : err))
            },
            trigger: 'blur'
          })
          this.$refs['loginForm'].validateField('password') // 手动校验
          this.rules.password = this.rules.password.slice(0, 1) // 删除校验，这个看自己之前写了几个校验来定split也可
        }
      })
    }
  }
}

登录错误时，使用element-ui form的错误展示区域来展示即时错误