1

我正在尝试将来自 vee-validate 的错误消息设置为来自 API 的错误消息。

<div class="col-md-12">
  <label for="company-contact-name" class="label-input">Company Contact Name</label>
  <input v-validate="validations.user.name" v-model="data.user.name" id="company-contact-name" class="form-control" type="text" name="name" placeholder="Enter contact name" />
  <div id="name-error" class="msg-error text-danger">{{ errors.first('name') }}</div>
</div>


<div class="col-md-12">
  <label for="email" class="label-input">E-mail address</label>
  <input v-validate="validations.user.email" v-model="data.user.email" id="email" class="form-control" type="email" name="email" placeholder="Enter e-mail" />
  <div id="email-error" class="msg-error text-danger">{{ errors.first('email') }}</div>
</div>

因此，如果 API 返回电子邮件错误，我想将上面的“errors.first('email')”编辑为 API 错误。然后，当用户开始更正该字段时，Vee Validate 将显示其配置的错误。

这是可能的错误数组的示例：

[
  {id: "name", title: "Name is invalid. It should have only letters"},
  {id: "name", title: "Name is too short. It should have more than three characters"},
  {id: "email", title: "Email has already been taken"}
]

可以做些什么来处理 API 错误消息？

感谢您的时间和关注。

4

1 回答 1

0

可能是这样的——创建一个新的验证器来检查 API 是否返回了错误消息，如果是的话——返回该错误消息。然后使用这个新的验证器作为您的字段的第一个验证器，同时为电子邮件地址添加内置的验证器。

<input 
  v-validate="api_email|email" 
  v-model="user.email" 
  id="email" 
  class="form-control" 
  type="email" 
  name="email" 
  placeholder="Enter e-mail" />

<script>
import { Validator } from 'vee-validate';

export default
{
  data()
  {
    api_error: '',
    user:
    {
      email: ''
    }
  },
  mounted()
  {
    Validator.extend('api_email', 
    {
      getMessage: this.emailError,
      validate: this.validateEmail
    });
  },
  methods:
  {
    validateEmail(value, args)
    {
      return !this.api_error;
    },
    emailError(field, args)
    {
      return this.api_error;
    }
  }
}
</script>

更新

如果您想支持一系列错误，那么也许您可以这样做

<div id="email-error" class="msg-error text-danger" v-for="err in [errors.first('email')].concat(array_with_api_errors.map(item => item.title))">{{ err }}</div>
于 2018-07-30T18:20:32.747 回答