Javascript Vue.js元素UI表单验证-显示来自后端的错误

我正在为我的项目使用Vue.js和元素Ui库。我有一些基于前端的验证规则。但我还需要从后端实现显示错误（对于当前字段）。发送表单时，后端返回错误，如下所示：

[
  {"message": "email address is invalid", "path": ["email"]},
  {"message": "example error for password field", "path": ["password"]}
]

<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>
        <p v-if="isErrorForField('email', errors)">{{ getErrorForField('email', errors) }}</p>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input v-model="loginForm.password" :disabled="formProcessing" type="password"></el-input>
        <p v-if="isErrorForField('password', errors)">{{ getErrorForField('password', errors) }}</p>
      </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>

其中path是基于我的表单字段模型的字段名

我创建了一些额外的元素来显示来自后端的错误，正如您在我的小提琴中看到的。但我想使用vue元素ui验证。因此，后端错误的显示方式应与前端消息相同。我不知道该怎么做

这是我的小提琴：

表单代码如下所示：

[
  {"message": "email address is invalid", "path": ["email"]},
  {"message": "example error for password field", "path": ["password"]}
]

<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>
        <p v-if="isErrorForField('email', errors)">{{ getErrorForField('email', errors) }}</p>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input v-model="loginForm.password" :disabled="formProcessing" type="password"></el-input>
        <p v-if="isErrorForField('password', errors)">{{ getErrorForField('password', errors) }}</p>
      </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={
数据（）{
返回{
登录信息：{
电子邮件：“”，
密码：“”
},
规则：{
电邮：{
要求：正确，
//验证器：this.customValidator，
//触发器：“模糊”
},
密码：{
要求：正确，
//验证器：this.customValidator，
//触发器：“模糊”
}
},
表单处理：false，
错误：[]
}
},
方法：{
customValidator（规则、值、回调）{
console.log（规则）
如果（！值）{
回调（新错误（'field is required'））
}
让错误=[{
“邮件”：“电子邮件地址无效”，
“路径”：[“电子邮件”]
},
{
“消息”：“密码字段的示例错误”，
“路径”：[“密码”]
}
]
设置超时（（）=>{
this.errors=错误
if（this.isErrorForField（rule.fullField，this.errors））{
回调（新错误（this.getErrorForField（rule.fullField，this.errors）））
}
回调函数（）
}, 500)
},
isErrorForField（字段，错误）{
如果（！errors&！errors.length）{
返回错误
}
let filtered=errors.filter（error=>{
返回错误。路径[0]==字段
})
如果（过滤的长度）{
返回过滤
}
},
getErrorForField（字段，错误）{
如果（！errors&！errors.length）{
返回错误
}
let filtered=errors.filter（error=>{
返回错误。路径[0]==字段
})
如果（过滤的长度）{
返回已筛选的[0]。消息
}
},
supportGlobalErrorMessage（）{
this.errors.forEach（error=>{
如果（！error.path.length）{
这是一封$message({
消息：error.message，
键入：“错误”
})
}
})
},
提交（formName）{
这是。$refs[formName]。验证（有效=>{
如果（！有效）{
返回错误
}
this.formProcessing=true
//将数据发送到后端
//错误响应如下所示：
让错误=[{
“邮件”：“电子邮件地址无效”，
“路径”：[“电子邮件”]
},
{
“消息”：“密码字段的示例错误”，
“路径”：[“密码”]
}
]
设置超时（（）=>{
this.errors=错误
this.formProcessing=false
this.supportGlobalErrorMessage（）
}, 500)
})
}
}
}
变量向量=Vue.extend（主）
新Ctor（）.$mount（'#app'）

@import url（“//unpkg.com/element-ui@2.0.5/lib/theme chalk/index.css）

登录
这几乎就是我想要的。还有一个问题，当字段中没有值时，如何显示消息“字段是必需的”？如果发送了一些值和表单，则应该像您的示例中那样工作。当然，如果后端返回错误。谢谢。@Marek编辑：）检查一下~谢谢，但我仍然不知道只有在提交表单时才显示后端错误，你能帮我吗？@Marek ok。设置
error
属性，该字段将验证错误并立即显示此消息