Vue.js Element UI表单验证：如何统一展示后端返回的字段错误

Element UI的表单组件其实内置了手动绑定字段错误的能力，完全可以让后端返回的错误复用它原生的验证样式，不需要额外添加自定义元素。核心就是用setFieldsError这个API，直接把后端错误映射到对应表单字段上，和前端验证的展示效果完全一致。

具体实现步骤： #

1. 移除自定义错误展示元素
   先删掉你之前在<el-form-item>里添加的<p>标签，因为我们要改用Element原生的错误提示了：

   <!-- 移除这段自定义错误代码 -->
   <p v-if="isErrorForField('email', errors)">{{ getErrorForField('email', errors) }}</p>
   

2. 重构后端错误处理逻辑
   收到后端错误后，先把错误格式转换成Element需要的结构，再调用setFieldsError绑定到表单上；同时记得每次提交前清空旧错误，避免残留。

3. 简化冗余方法
   原来的isErrorForField和getErrorForField方法可以直接删除，不需要再手动判断和渲染错误了。

修改后的完整代码： #

<el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="top">
  <el-form-item label="Email" prop="email">
    <el-input v-model="loginForm.email" :disabled="formProcessing" ref="loginInput"></el-input>
  </el-form-item>
  <el-form-item label="Password" prop="password">
    <el-input v-model="loginForm.password" :disabled="formProcessing" type="password"></el-input>
  </el-form-item>
  <el-form-item>
    <div class="submit-wrapper">
      <el-button type="primary" @click="submit('loginForm')" :loading="formProcessing">Log in</el-button>
    </div>
  </el-form-item>
</el-form>

var Main = {
  data() {
    return {
      loginForm: {
        email: '',
        password: ''
      },
      rules: {
        email: { required: true, message: 'Required', trigger: 'change' },
        password: { required: true, message: 'Required', trigger: 'change' }
      },
      formProcessing: false
    }
  },
  methods: {
    supportGlobalErrorMessage(errors) {
      errors.forEach(error => {
        if (!error.path.length) {
          this.$message({
            message: error.message,
            type: 'error'
          })
        }
      })
    },
    submit(formName) {
      const formRef = this.$refs[formName]
      // 提交前清空旧的字段错误
      formRef.clearValidate()
      
      formRef.validate(valid => {
        if (!valid) {
          return false
        }
        this.formProcessing = true
        
        // 模拟后端请求返回错误
        setTimeout(() => {
          this.formProcessing = false
          const backendErrors = [
            {"message": "email address is invalid", "path": ["email"]},
            {"message": "example error for password field", "path": ["password"]}
          ]
          
          // 处理无对应字段的全局错误
          this.supportGlobalErrorMessage(backendErrors)
          
          // 转换错误格式为Element所需结构：{ 字段prop: [错误信息] }
          const fieldErrors = {}
          backendErrors.forEach(error => {
            if (error.path.length) {
              const field = error.path[0]
              fieldErrors[field] = [error.message]
            }
          })
          
          // 绑定错误到表单，自动触发原生验证样式
          formRef.setFieldsError(fieldErrors)
        }, 500)
      })
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

关键细节说明： #

• setFieldsError接受一个对象，键是表单字段的prop值，值是错误信息数组（即使单条错误也要用数组格式），调用后Element会自动在对应字段下方渲染错误提示，样式和前端原生验证完全一致。
• clearValidate用来在每次提交前清空历史错误，避免旧错误干扰新的提交流程。
• 保留了supportGlobalErrorMessage处理无对应字段的全局错误（比如系统级提示），不影响字段级错误的展示。

这样修改后，后端返回的错误就会和前端验证错误用完全相同的样式展示，不需要额外维护自定义的错误元素啦！

内容的提问来源于stack exchange，提问作者Marek