nuxt.js - veeValidate 3.x + Nuxt js:将自定义错误推送到 ValidationObserver
问题描述
我正在使用 Nuxt js + veeValidate 3.x
我的插件看起来像这样:
import Vue from 'vue'
import {
ValidationObserver,
ValidationProvider,
extend
} from 'vee-validate'
import { required, email, min, confirmed } from 'vee-validate/dist/rules'
extend('required', {
...required,
message: 'This field is required'
})
extend('email', email)
extend('min', min)
extend('confirmed', confirmed)
Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)
作为插件添加到nuxt.config.js
plugins: [{ src: '~/plugins/vee-validate.js', ssr: false }, ..
模板中,如下所示:
<ValidationObserver ref="registrationForm">
<ValidationProvider rules="required|email" name="Email Address" v-slot="{ errors }">
<div>
<input type="text" v-model.lazy="user.email"/>
<span class=form-errors">{{ errors[0] }}</span>
</div>
</ValidationProvider>
</ValidationObserver>
验证以这种方式完美运行:
methods: {
async submit() {
const isValid = await this.$refs.registrationForm.validate()
if (isValid) {
this.register()
....
但是在执行过程中我可能会从 API 端收到一些错误this.register()
(例如:错误:电子邮件已存在)。如何将收到的错误推送到验证错误数组中(如果有的话)?旧的方式this.errors.add()
(当然)不再起作用了。我已经阅读了有关 ErrorBag 的信息,但我只是不明白如何在插件中导入/导出它
解决方案
最后我在这里找到了答案:
这被称为“处理后端验证”
简而言之,答案是:
....
this.$refs.registrationForm.setErrors({ email: ['Your email does\'t look good enough! Try again!'] })
...
将在输入字段下方显示错误
PS:如果你使用 Laravel 作为后端,错误处理将开箱即用:
// try,async stuff sending data to the endpoint
...
catch (error) {
this.$refs.registrationForm.setErrors(error.response.data.errors)
}
推荐阅读
- python - 如何从文本文件中获取第一个单词删除\ n - python
- angular - 绑定一个
- python - 使用循环从 NetCDF 生成多个底图
- python - Python - 刽子手
- php - 将数组作为 POST 请求参数发送到 PHP - Swift
- laravel - DELETE 方法在 PHP 变量中不起作用
- android - 我的 colors.xml 文件没有显示主题颜色。一切都是灰色的。如何解决这个问题?
- sapui5 - 使用 SAP UI5 动态呈现视图元素
- c# - 收到错误“Type Universe 无法解析程序集:System.Runtime,Version=4.0.0.0,Culture=neutral,PublicKeyToken=b03f5f7f11d50a3a。”
- deployment - Sylius:“缓存:清除”超时